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Your First App 

So you’re thinking: “What makes Android so special?” 

Android is a free and open operating system from Google that runs on all kinds 
of devices from phones, to tablets and even televisions. That’s a ton of different 
devices you can target with just one platforml (And the market share is gaining 
too!) Google provides all of the stuff you need to get started building Android apps 
for free. You can build your Android apps on Macs, Windows, or Unix and publish 
your apps for next to nothing (with no need for anyone’s approval). Ready to get 
started? Great! You’re going to start building your first Android app, but first there 
are a few things to set up... 
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meet android 

Your first app 

So you’re thinking: “What makes Android so special? ” 



Android is a free and open operating system from Google that runs on all kinds 
of devices from phones, to tablets and even televisions. That’s a ton of different 
devices you can target with just one platforml (And the market share is gaining 
too!) Google provides all of the stuff you need to get started building Android apps 
for free. You can build your Android apps on Macs, Windows, or Unix and publish 
your apps for next to nothing (with no need for anyone’s approval). Ready to get 
started? Great! You’re going to start building your first Android app, but first there 
are a few things to setup... 



Give your app an action 

Apps are interactive! When it comes to apps, it’s what your users can 
do with your apps that make them love ‘em. As you saw in Chapter 1 , Android 
really separates out the visual definition of your apps (remember all that 
XML layout and String resource work you just did!) from the behavior that’s 
defined in Java code. In this chapter, you’re going to add some behavior to the 
AndroidLove haiku app. And in the process you’ll learn how the XML resources 
and Java work seamlessly together to give you a great way to build your Android 
apps! 



Pictures from space! 

RSS feeds are everywhere! From weather and stock information to 
news and blogs, huge amounts of content are distributed in RSS feeds and just 
waiting to be used in your apps. In fact, the RSS feed publishers want you to use 
them! In this chapter, you’ll learn how to build your own app that incorporates 
content from a public RSS feed on the Web. Along the way, you’ll also learn a little 
more about layouts, permissions, and debugging. 
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long-running processes 

When things take time 

It would be great if everything happened instantly, unfortunately, 

some things just take time. This is especially true on mobile devices, where network 
latency and the occasionally slow processors in phones can cause things to take a 
bit longer. You can make your apps faster with optimizations, but some things just 
take time. But you can learn how to manage long-running processes better. In this 
chapter, you’ll learn how to show active and passive status to your users. You’ll also 
learn how to perform expensive operations off the III thread to guarantee your app is 
always responsive. 

multiple-device support 

Run your app everywhere 

There are a lot of different sized Android devices out 

there. You’ve got big screens, little screens, and everything in between. And it’s 
your job to support them all! Sounds crazy, right? You’re probably thinking right 
now ‘ How can I possibly support all of these different devices?” But with the 
right strategies, you’ll be able to target all of these devices in no time and with 
confidence. In this chapter, you’ll learn how Android classifies all of these different 
devices into groups based on screen size as well as screen density. Using these 
groups, you’ll be able to make your app look great on all of these different devices, 
and all with a manageable amount of work! 

optimizing for tablets 

Tablets are not just big phones 

Android tablets are coming onto the scene. These new larger- 
format Android devices give you an entirely new hardware format to present new 
and cool apps to your users. But they are not just big phones! In this chapter, 
you’ll learn hot to get your app up and running on a tablet. You’ll learn about the 
new screen size groupings and also how to use Fragments to combine multiple 
Activities on a single screen. So more importantly then just running on tablets in 
this chapter, you’ll learn about how to make your app work better on them. 
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lists and adapters 

Building a list-based app 

Where would we be without lists? They display read-only information, 
provide a way for users to select from large data sets, or even act as navigational 
device by building up an app with a list-based menu structure. In this chapter, you’ll 
learn how to build an app with a list. You learn about where lists store data (in Adapters) 
and how to customize how that data is rendered in your list. You’ll also learn about 
adding additional layouts to your app (not just the layout that the Wizard creates for 
you) and turn that into a real view. 

multi-screen apps 

Navigation 

Eventually you’ll need to build apps with more than one 

Screen.. So far, all of the apps you’ve built only have a single screen. But the 
great apps you’re going to build may need more than that! In this chapter, you’ll 
learn how to do just that. You’ll build an app with a couple of screens, and you’ll 
learn how to create a new Activity and layout which was previously done for you 
by the Wizard. You’ll learn how to navigate between screens and even pass data 
between them. You’ll also learn how to make your own Android context men- the 
menu that pops up when press the Menu button! 

database persistence 

Store your stuff with SQLite 

In memory data storage only gets you so far. in the last chapter, 

you built a list adapter that only stored data in memory. But if you want the app to 
remember data between sessions, you need to persist the data. There are a few ways 
to persist data in Android including writing directly to files and using the built in SQLite 
database. In this chapter, you’ll learn to use the more robust SQLite database solution. 
You learn how to create and manage your own SQLite database. You’ll also learn how 
to integrate that SQLite datase with the ListView in the TimeTracker app. And don’t 
worry, if you’re new to SQL, you’ll learn enough to get started and pointers to more 
information. 
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relatiVekyout 

It’s all relative 

You’ve created a few screens now using LinearLayouts 
(and even nested LinearLayouts). But that will only get you so far. 
Some of the screens you’ll need to build in your own apps will need to do things 
that you just cant’ do with LinearLayout. But don’t worry! Android comes with other 
layouts that you can use. IN this chapter, you’ll learn about another super powerful 
layout called RelativeLayout. This allows you to layout Views on screen relative to 
each other (hence the name). It’s new way to layout your Views, and as you’ll see 
in the chapter, a way to optimize your screen layouts. 

tweaking your u! 

Giving your app some polish 

With all the competition in the marketplace, your apps 
must do more than just work. They have to look great doing 
it! Sometimes, basic graphics and layouts will work. But other times, you’ll need to 
crank it up a notch. In this chapter, you’ll learn about a new layout manager called 
Relative Layout. It’ll let you lay out your screens in ways that you just can’t do with 
LinearLayout and help you code your designs just the way you want them. You’ll 
also learn more techniques for using images to polish up the look and feel of your 
app. Get your app noticed! 

content providers 

Make the best of what you can use 

You don’t want to reinvent the wheel, do you? of course you 
don’t; you’ve got apps to build! Well, one of the awesome benefits of Android is the 
ease in which you can use bits of other applications with content providers. Android 
apps can expose functionality they want to share and you can use that in your apps. 
But this doesn’t work only for market apps; a number of built-in apps (like the Address 
Book) expose stuff you can use in your apps too. In this chapter, you’ll learn how to 
use content providers in your app. And who knows, you might like this whole content 
provider thing so much, you’ll decide to provide some of your own content to other 
apps! 
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how to use this book 



Who is this book for? 



If you can answer “yes” to all of these: 



© 



Have you done some Java programming, but don’t 
consider yourself a master? 



© 



Do you want to build mobile apps for an awesome mobile 
OS that runs on tons of devices? 



© 



Do you prefer stimulating dinner party conversation to dry, 
dull, academic lectures? 



this book is for you. 



Who should probably back away f row this book? 

If you can answer “yes” to any of these: 



© 



Have you already mastered Android programming but 
need a solid reference? 



© 

© 



Are you solid with the basic Android development 
fundamentals and are just looking for a guide to its 
super-advanced features, like ADL or services? 

Are you afraid to try something different? Would you 
rather have a root canal than mix stripes with plaid? 
Do you believe that a technical book can’t be serious 
if it anthropomorphizes control groups and objective 
functions? 



this book is not for you. 



* 

CMoic fro* marketing.- this book 
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intro 



the intro 



We know what you're thinking 



“How can this be a serious Android development book?” 
“What’s with all the graphics?” 



“Gan I actually learn it this way?” 

We know what your brain is thinking 

Your brain craves novelty. It’s always searching, scanning, waiting for something 
unusual. It was built that way, and it helps you stay alive. 

So what does your brain do with all the routine, ordinary, normal things 
you encounter? Everything it can to stop them from interfering with the 
brain’s real job — recording things that matter. It doesn’t bother saving the 
boring things; they never make it past the “this is obviously not important” 
filter. 

How does your brain know what’s important? Suppose you’re out for a day 
hike and a tiger jumps in front of you, what happens inside your head and 
body? 

Neurons fire. Emotions crank up. Chemicals surge. 

And that’s how your brain knows... 

This must be important! Don’t forget it! 



THIS 

s ,s u *r*rU>t 





But imagine you’re at home, or in a library. It’s a safe, warm, tiger-free zone. n^ovaV* \&\k. 



You’re studying. Getting ready for an exam. Or trying to learn some tough 
technical topic your boss thinks will take a week, ten days at the most. 

Just one problem. Your brain’s trying to do you a big favor. It’s trying to 
make sure that this obviously non-important content doesn’t clutter up scarce 
resources. Resources that are better spent storing the really big things. 

Like tigers. Like the danger of fire. Like how you should never have 
posted those “party” photos on your Lacebook page. And there’s no 
simple way to tell your brain, “Hey brain, thank you very much, but 
no matter how dull this book is, and how little I’m registering on the 
emotional Richter scale right now, I really do want you to keep this 
stuff around.” 
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the intro 



Metacognition: thinking about thinking 

If you really want to learn, and you want to learn more quickly and more 
deeply, pay attention to how you pay attention. Think about how you think. 

Learn how you learn. 

Most of us did not take courses on metacognition or learning theory when we 
were growing up. We were expected to learn, but rarely taught to learn. 

But we assume that if you’re holding this book, you really want to learn 
Android. And you probably don’t want to spend a lot of time. If you want to 
use what you read in this book, you need to remember what you read. And for 
that, you’ve got to understand it. To get the most from this book, or any book 
or learning experience, take responsibility for your brain. Your brain on this 
content. 

The trick is to get your brain to see the new material you’re learning as 
Really Important. Crucial to your well-being. As important as a tiger. 

Otherwise, you’re in for a constant battle, with your brain doing its best to 
keep the new content from sticking. 

So just how DO you get your brain to treat Android 
like it was a hungry tiger? 

There’s the slow, tedious way, or the faster, more effective way. The 
slow way is about sheer repetition. You obviously know that you are able to learn 
and remember even the dullest of topics if you keep pounding the same thing into your 
brain. With enough repetition, your brain says, “This doesn’t feel important to him, but he 
keeps looking at the same thing over and over and over , so I suppose it must be.” 

The faster way is to do anything that increases brain activity, especially different 
types of brain activity. The things on the previous page are a big part of the solution, 
and they’re all things that have been proven to help your brain work in your favor. For 
example, studies show that putting words within the pictures they describe (as opposed to 
somewhere else in the page, like a caption or in the body text) causes your brain to try to 
makes sense of how the words and picture relate, and this causes more neurons to fire. 
More neurons firing = more chances for your brain to get that this is something worth 
paying attention to, and possibly recording. 

A conversational style helps because people tend to pay more attention when they 
perceive that they’re in a conversation, since they’re expected to follow along and hold up 
their end. The amazing thing is, your brain doesn’t necessarily care that the “conversation” 
is between you and a book! On the other hand, if the writing style is formal and dry, your 
brain perceives it the same way you experience being lectured to while sitting in a roomful 
of passive attendees. No need to stay awake. 

But pictures and conversational style are just the beginning. . . 
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how to use this book 



Here's what WE did: 

We used pictures, because your brain is tuned for visuals, not text. As far as your brain’s 
concerned, a picture really is worth a thousand words. And when text and pictures work 
together, we embedded the text in the pictures because your brain works more effectively 
when the text is within the thing the text refers to, as opposed to in a caption or buried in the 
text somewhere. 

We used redundancy, saying the same thing in different ways and with different media types, 
and multiple senses, to increase the chance that the content gets coded into more than one area 
of your brain. 

We used concepts and pictures in unexpected ways because your brain is tuned for novelty, 
and we used pictures and ideas with at least some emotional content, because your brain 
is tuned to pay attention to the biochemistry of emotions. That which causes you to feel 
something is more likely to be remembered, even if that feeling is nothing more than a little 

humor, surprise, or interest . 

We used a personalized, conversational style, because your brain is tuned to pay more 
attention when it believes you’re in a conversation than if it thinks you’re passively listening 
to a presentation. Your brain does this even when you’re reading. 

We included more than 80 activities, because your brain is tuned to learn and remember 
more when you do things than when you read about things. And we made the exercises 
challenging-yet-do-able, because that’s what most people prefer. 

We used multiple learning styles, because you might prefer step-by-step procedures, while 
someone else wants to understand the big picture first, and someone else just wants to see 
an example. But regardless of your own learning preference, everyone benefits from seeing the 
same content represented in multiple ways. 

We include content for both sides of your brain, because the more of your brain you 
engage, the more likely you are to learn and remember, and the longer you can stay focused. 
Since working one side of the brain often means giving the other side a chance to rest, you 
can be more productive at learning for a longer period of time. 

And we included stories and exercises that present more than one point of view , 
because your brain is tuned to learn more deeply when it’s forced to make evaluations and 
judgments. 

We included challenges, with exercises, and by asking questions that don’t always have 
a straight answer, because your brain is tuned to learn and remember when it has to work at 
something. Think about it — you can’t get your body in shape just by watching people at the 
gym. But we did our best to make sure that when you’re working hard, it’s on the right things. 
That you’re not spending one extra dendrite processing a hard-to-understand example, 
or parsing difficult, jargon-laden, or overly terse text. 

We used people. In stories, examples, pictures, etc., because, well, because you’re a person. 
And your brain pays more attention to people than it does to things. 
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Here's what YOU can do to bend 
your brain into submission 

So, we did our part. The rest is up to you. These tips are a 
starting point; listen to your brain and figure out what works 
for you and what doesn’t. Try new things. 

Cut this out dhd sti£k 
•t oh your refrigerator. 



^ Slow down. The more you understand, the 
less you have to memorize. 

Don’t just read. Stop and think. When the book asks 
you a question, don’t just skip to the answer. Imagine 
that someone really is asking the question. The 
more deeply you force your brain to think, the better 
chance you have of learning and remembering. 

0 Do the exercises. Write your own notes. 

We put them in, but if we did them for you, that 
would be like having someone else do your workouts 
for you. And don’t just look at the exercises. Use a 
pencil. There’s plenty of evidence that physical 
activity while learning can increase the learning. 

0 Read the “There are No Dumb Questions” 

That means all of them. They’re not optional 
sidebars, they We part of the core content! 

Don’t skip them. 

A Make this the last thing you read before bed. 
Or at least the last challenging thing. 

Part of the learning (especially the transfer to 
long-term memory) happens after you put the book 
down. Your brain needs time on its own, to do more 
processing. If you put in something new during that 
processing time, some of what you just learned will 
be lost. 

0 Talk about it. Out loud. 

Speaking activates a different part of the brain. If 
you’re trying to understand something, or increase 
your chance of remembering it later, say it out loud. 
Better still, try to explain it out loud to someone else. 
You’ll learn more quickly, and you might uncover 
ideas you hadn’t known were there when you were 
reading about it. 



0 Drink water. Lots of it. 

Your brain works best in a nice bath of fluid. 
Dehydration (which can happen before you ever 
feel thirsty) decreases cognitive function. 

0 Listen to your brain. 

Pay attention to whether your brain is getting 
overloaded. If you find yourself starting to skim 
the surface or forget what you just read, it’s time 
for a break. Once you go past a certain point, you 
won’t learn faster by trying to shove more in, and 
you might even hurt the process. 

0 Feel something. 

Your brain needs to know that this matters. Get 
involved with the stories. Make up your own 
captions for the photos. Groaning over a bad joke 
is still better than feeling nothing at all. 

0 Get your hands dirty! 

There’s only one way to learn to Android: get 
your hands dirty. And that’s what you’re going to 
do throughout this book. Android Development 
is a skill, and the only way to get good at it is to 
practice. We’re going to give you a lot of practice: 
every chapter has exercises that pose a problem for 
you to solve. Don’t just skip over them — a lot of the 
learning happens when you solve the exercises. We 
included a solution to each exercise — don’t be afraid 
to peek at the solution if you get stuck! (It’s easy to 
get snagged on something small.) But try to solve 
the problem before you look at the solution. And 
definitely get it working before you move on to the 
next part of the book. 
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Safari® Books Online 



Safari 

Books Online 



When you see a Safari® icon on the cover of your favorite 
technology book that means the book is available online through 
the O’Reilly Network Safari Bookshelf 



Safari offers a solution that’s better than e-books. It’s a virtual library that lets you easily 
search thousands of top tech books, cut and paste code samples, download chapters, 
and find quick answers when you need the most accurate, current information. Try it 
for free at http : / /my . saf aribooksonline . com/ ?portal=oreilly . 
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^ Your first app + 




So you’re thinking: “What makes Android so special? ’’Android is 

a free and open operating system from Google that runs on all kinds of devices from 
phones, to tablets and even televisions. That’s a ton of different devices you can target 
with just one platform. (And the market share is gaining too). Google provides everything 
you need to get started building Android apps for free. And you can build your Android 
apps on either Mac, Windows, or Unix and publish your apps for next to nothing (and with 
no need for anyone’s approval). Ready to get started? Great! You’re going to start building 
your first Android app, but first there are a few things to setup... 



this is a new chapter 1 



why android 



So you want to build an Android app... 

Maybe your an Android user, you already know Java and 
want to get in on the mobile craze, or you just love the open 
operating system and hardware distribution choices of Android. 
Whatever your reason, you’ve come to the right place. 

Android already runs on a TON of different devices! 

With careful planning, you’re app can run on all of these 
Android powered devices. From phones and tablets, to TVs and 
even home automation, Android is spreading quickly. 





these devices... 
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Chapter 1 



your first app 



And if s growing! 

Tha-fc's a LOT of 
devices in one day/ 

"Over 5 00,000 Android devices [are] activated every day” 

— Google’s Head of Android, Andy Rubin, via Twitter 



Just check out the Android Market 

The Android Market has a ton of apps. There are or course 
games (because we all love playing games on our phones), but 
also really great apps that just make our lives better like 
navigation and commuting schedule apps. 



^ AIITrails - Hiking & Biking 

4* C /I 9 https://markct.android.com/dctails7id-com. alltrails. alltrails&hl-cn ^ O d 


♦You Web Images Videos Maps News Gmail More 

at Android Market 


Android Apps ▼ Movies ▼ Books ▼ My Library | Soorch 


AIITrails - Hiking & 
Biking 

AiTrails, Inc 

av 

* * * * A (19) 

INSTALL 


A. AIITrails 



Users who installed this also installed 



Description 



The Andvoid 
Market web vie* 
•for 3n outdoor 

exploration app 
AIITrails- • 



There are a lot of mobile platforms out there, but with 
Android’s presence and growth, everyone is building out their 
Android apps. Welcome to Android, it’s a great place to be! 



Before you dig into your first app, let’s take a look at 
exactly what Android is and who’s responsible for it... 



you are here ► 



3 




the android ecosystem 



So tell we about Android... 

Android is a mobile operating syetem, but it’s a 
lot more than that too. There is a whole ecosystem, 
a complete platform, and community that supports 
Android apps getting built and on to new Android based 
hardware devices. 



Q Google maintains Android O 

Google maintains Android, but it’s free to use. 

Device manufacturers and carriers can modify 
me, and developers can build apps for free. 




W 




Hardware manufacturers build a device 

Hardware manufactures can use the Android 
operating system and build special hardware 
around it. Manufacturers can even modify 
Android to implement custom functionality for 
their devices. 




O 



Google gives you the tools 

Google freely distributes the tools for you to 
build your own Android apps. And you can build 
your apps on multiple platforms: Mac, Windows, 
Linux... 



O 




Google also runs a Market 

This is where your users can download their apps 
right to their phones. Google runs one market, 
but there are also others run by Amazon, and 
Verizon for example. But the biggest one is still 
Google’s. 
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Are you ready to get started? 




With all these different 
devices and OS variations, how 
do you build anything at all? 
Where do you even start? 



In practice, it’s not so bad! 

It’s true that there are a bunch of different 
Android devices out there, from all kinds of 
different manufacturers running different 
modifications of Android. Sounds crazy right? While 
it definitely takes some care tuning your apps 
for these different devices, you can get started 
building basic phone apps really easily. And that’s 
what you’re going to do right now. 

Later on in the book, you’ll learn strategies for 
dealing with different types of devices like phones 
with different resolutions and even designing for 
phones and tablets in the same app. 



Let’s get started. 
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the android rockers 



Meet Pajama Peath 

It’s time to introduce you to an awesome 
rock duo called the Pajama Death! They 
love Android and love to sing about it! 




They write all of their song lyrics in the form of a haiku 

A haiku is an ancient Japanese form of poetry Each 
poem consists of 3 lines - the first line having 5 syllables, 
the second 7 syllables, and the third line 5 syllables just 
like the first. These poems are meant to be meaningful, 
yet compact... just like your Android apps! 
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your first app 



They're about to play their favorite song for you! 
This one's called... Android Love! 





Put they weed your help! 

They want to make an app with the Android Love 
lyrics to hand out to their fans. But they are Android 
users not Android developers. They heard that 
you were learning to build your own Android apps. 
They were wondering if you would build the app for 
them. And how could you say no? Of course you’ll 
do it, you’re a huge fan! 

OK, let’s get started... 
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getting started 



(retting started 

Just asking you to build an app isn’t a lot to go on. So 
the Pajama Death made a napkin sketch of what 
they want the app to look like. It’s an app showing the 
haiku, with each line of the haiku on a new line. 



£very app needs a title- 
Sin£e the song is tailed 
Android Love, tall the app 
'Andvoid Love* too. 



Wert art the lyv-its to the 
song. Sinte it's a haiku in 
three lines, eath line of the 
haiku goes on its own line. 




First you’ve got some setup to do 

Since this is your first Android app, you’ll need 
to setup your development environment. Let’s 
start with a quick look at what you need in your 
development environment to build Android 
apps. Form there, you’ll install your own 
development environment, then build the app 
for Pajama Deathl 
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Meet the android development environment 



The Android development environment 
is made up of several parts that seamlessly 
work together for you to build Android 
apps. Let’s take a closer look at each one. 



© 



Eclipse Integrated Development 
Environment (IDE) 

The Eclipse Integrated Development 
Environment (IDE for short) is where you’ll 
write your code. Eclipse is a generic IDE, 
not specific to Android development. It’s 
managed by the Eclipse foundation. 



© 



Android Development Tools (ADT) 

The Android Development Tools (ADT) 
is an Eclipse plugin that adds Android 
specific functionality to Eclipse. 



O Software Development Kit (SDK) 

The Android Software Development Kit 
(SDK) contains all of the lower level tools 
to build, run and test your Android apps. 
The ADT is really just a user interface, and 
the guts of the app building all happens 
here in the ADT. 



o 



Android Packages 

You can develop and support multiple 
versions of Android from the same 
developmentw environment. These 
packages add functionality to the base 
SDK to let you develop for that Android 



You dan use Mat, 
tV’mdou/s or L’rnu* *to 
build A^dv-o'id apps. 



i 
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your development environment 



Choosing your I PE 



Eclipse may be a fine IDE, but 
what if you don’t want to use it. 
You may have your own IDE of 
choice that you’d rather use... 




You don’t have to use Eclipse. 

But it certainly makes things easier. The full 
integrated Android development environment 
works well as a whole to help you easily build 
Android apps. 

But everything you need to build and test your 
Android apps is the Android SDK and Android 
Packages. If you really cant live without your 
favorite development environment,, you can use it 
in conjunction with the SDK without Eclipse and 
still build Android apps. 



Even though you can use the 
SDK without Eclipse, all ol the 
examples in this hook will use 
Eclipse and the ADT plugin. 
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There's some major 
app construction projects 
up ahead. Don't go any 
further until you've 
installed your IDE! 



Set up your development environment 

You won’t be able to build your apps until your 
development environment is setup! Follow our 
nifty Android development environment setup 
instructions over the next few pages and you’ll be 
ready to build your apps! 



Turn the page for instructions 
on setting up your own Android 
development environment... 



► 
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download, install and launch eclipse 

Eclipse is a free and open source IDE managed by the Eclipse 
foundation (started and managed by IBM, but a very open 
community). You can download Eclipse for free from the eclipse, 
org. There are a number of different versions of Eclipse optimized 
for different types of development. You should download the latest 
version of Eclipse Classic for your Operating System. 



http : / / www .eclipse.org/ downloads 




(Eclipse Downloads 
^ ^ 0 ( ) www.eclipse.org cnvnloads/ 




Home Downloads Users Members Committers Resources Projects About Us 



Eclipse Downloads 



Packages Projects 



Compare Packages Older Versions 



Eclipse IDE for Java Developers. 9B mb 

Downloaded 152.206 Times Details 



Eclipse Helios (3.6.1) Packages for 



Mac OS X (Cocoa) 



[] Hir 



m Eclipse Classic 3.6.1. 169 mb 

^ Downloaded 115.905 Times Details Other Downloads 



I Eclipse IDE for Java EE Developers. 204 mb 

Downloaded 96,518 Tunes Details 



± 

& 



Mac OS X 32 Bit 
Mac OS X 64 Bit 



Mac OS X 32 Bit 
Mac OS X 64 Bit 



Mac OS X 32 Bit 
Mac OS X 64 Bit 



You 
envi 
5 JR 
prov 
of th 
Use 
spec 



e 



Eclipse IDE for C/C++ Developers, 87 m b 



„ Mac OS X 32 Bit 



After you download Eclipse, follow the installation instructions for 
your platform and launch Eclipse. When you launch Eclipse for the 
first time, you will be prompted to enter a workspace location ; 
a directory where all of your Eclipse projects and settings will be 
stored. Feel free to use the default or enter your own. 



0en 



Workspace Launcher 



Select a workspace 

Eclipse Platform stores your projects in a directory called 
Select the workspace directory to use for this session. 


a workspace. 






n / — 




Workspace: /Users/daniel /Documents /workspace 


k 3 


( Browse... ^ 


Use this as the default and do not ask again 




( Cancel ) 


( s ) 



Enter your 
work spade location 
div-c^-tov-y here. 
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Poanload and install the SPK 

The Android SDK contains the core tools 
needed to build and run Android apps. This 
includes the Android emulator, builder, docs 
and more. You can download the SDK from 
android.developer.com. 



http : / / developer . android . com/ sdk/ index . html 



\ / 

Android SDK | Android Devt X / 

^ C 1© developer.android.co m/sdk/index.html & Q » ^ 

id ( English i ) v- rccn : 



developers 



search developer docs 



( Search ) 



Home 



SDK 



Dev Guide Reference 



Resources Videos 



Android SDK Starter Package 



Download 



Installing the SDK 

Downloadable SDK Components 



Download the Android SDK 



Blog 



Adding SDK Components 
Android 22 Platform nw "' 1 
Android 2.1 Platform 
Android 1.6 Platform 
Android 1.5 Platform 
► Older Platforms 
SDK Tools, r7 newl 
USB Driver for Windows. r3 



ADT Plugin for Eclipse 

ADT 0.9.9 newl 

Native Development Tool? 

Android NDK, r4b 

More Information 

7 ‘ 

povmload -the SDK 

&>v vow*- 




Welcome Developers! If you are new to the Android SDK, please read the Quick Start , below, for an overview 
of how to install and set up the SDK. 

If you are already using the Android SDK and would like to update to the latest tools or platforms, please use 
the Android SDK and AVD Manager to get the components, rather than downloading a new SDK package. 



Platform 


Package 


Size 


MD5 Checksum 


Windows 


android-sdk r07-windows.zio 


23669664 bytes 


69c40c2d2e408b6231 56934f9ae574f0 



Mac OS X (intel) android-sdk r07-mac x86.zip 19229546 bytes Of 330ed3ebb36786faf6dc72b8acf81 9 
Linux (i386) android-sdk r07-linux x86.toz 17114517 bytes e10c75da3d1aa147ddd4a5c58bfc3646 






Once you download the SDK zip file, unzip it 
to your hard drive and the SDK is ready to go. 



Now let’s setup the ADT... 
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the eclipse plugin 



Install the APT 



The Android Development Tools (ADT) are the glue that 
seamlessly connects the Android specific SDK with Eclipse. 
The ADT is an Eclipse plugin, and it installs through the 
standard Eclipse plugin installation mechanism (so this 
should look very familiar if you’re an experienced Eclipse 
user). 



From your Eclipse window, select Help — > Install new 
software. This will bring up the Available Software window. 
Since this is being installed from scratch, you’ll need to 
create a new site for the ADT. 



fcnlcr “this 
URL ’nrrto *tbe 
1 -text ‘field- 



https : //dl-ssl . google . com/ android/ eel ipse 



Available Software 

Select a site or enter the location of a site. 



Work with: \ https://dl-ssl.google.com/android/eclipse/ 



10 C Add.- 



Find more software by working with the 'Available Software Sites' preferences. 




2J Show only the latest versions of available software C Hide items that are already installed 
Croup items by category What is already installed ? 

2? Contact all update sites during install to find required software 



( Cancel ) Finish 



FVess Add-. 




Available 

So-f-twav-e 

window- 
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Configure the APT 

The ADT is just the glue between the SDK and Eclipse, so 
the ADT needs to know where the SDK is installed. 

Set the SDK location in the ADT by going to Window — > 
Preferences in Eclipse, selecting Android from the left panel, 
and selecting the directory where you installed the Android 
SDK. 



Selefrt "Android" trom 
•the Preterendes list 



'" ,v ' wncrc you 

unzipped -the Android 



Preferences 



type filter text i 

► General 
* Android 

Build 
DDMS 
Launch 
Log Gat 
Usage Stats 

► Ant 

► Help 

► Install/Update 
►Java 

► Plug-in Development 

► Ftun/Debug 

► Tasks 

► Team 

► XML 



Android 



/P T 



Android Preferences 

SDK Location: /Developer/Applications/android-sdk-mac_S6 ^ Browse ^ 1 

Note: The list of SDK Targets below is only reloaded once you hit ‘Apply 1 or ‘OK 1 . 



Target Name 


Vendor 


| Platform | API Levt| 




No target available 





^ Restore Defaults j : ^ Apply ) 




It’s a good idea to add the <SDK-install-directory>/ 
tools directory to your path. The SDK includes a number of 
command line tools and it’s convenient to be able to launch them 
without having to type in complete paths. 
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Install android packages 

The SDK is designed to allow you to work with 
multiple versions of Android in the same development 
environment. To keep downloads small, the SDK version 
packages are separated from the SDK. (This also allows 
you to update to new versions of Android without having 
to redownload the entire SDK. Pretty slick!) 

You can configure the installed packages in the SDK 
from the Android SDK and AVD Manager (another 
added bonus of the ADT). Open the manager by 
selecting Window — > Android SDK and AVD Manager. 

From the left pane, select “Available Packages”. Android SDls 

and AW 



O f 



Android SDK and AVD Manager 



Virtual devices 
Installed packages 
Available packages 



SDK Location: /Users/jonathansifnon/android-sdk-mac_xS6/ 





Description 



Q Add Add-on SiteT") : Delete Add-on Site.. . gj Dis f Refresh 1 , Install Selected 






When you expand the tree node, you’ll see a combination 
of SDK Tools, SDK platforms, samples documentation 
and more. These are all plugins to the SDK that you can 
add to expand the functionality of the SDK. (This way 
you can download and install the SDK once and keep 
adding new functionality to it as new versions come out). 
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* + 

Do this? ► 




Select "SDK Platform 
Android 2.3.3"and 
press "Install Selected" 



ti lereicire no 

Dumb Questions 




What about the samples should I install those? 



Google put together a set of sample apps that show off a 
bunch of features and techniques in the platform. They won’t be 
used in the book, but they are extremely useful. If you want to 
learn about something not covered in the book, the samples are a 
great place to start. 




And what about Tools? Should I install those too? 



The tools inside the SDK can also get updated as new 
functionality is released in the Android platform. It’s a good idea to 
keep these up to date. 
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make your own project 



Make a new Android app project 

Now that you have your environment setup, it’s time to make 
your first project. 

The Eclipse ADT plugin comes with a Wizard to create 
new Android apps. All you have to do is enter a few bits of 
information into the wizard, and it makes a fully functional 
(but very boring) application for you. 

Launch the New Android Project wizard by going to File — > 
New — ► Android Project, then fill in the fields to make your 
new project! 



Kew Android 
Project wizard- 






New Android Project 



New Android Project 

An SDK Target must be specified. 




Call the project 

"AndroidLovc" 



Project name: AndroidLove 

Contents 

(*) Create new project in workspace 
O Create project from existing source 
Use default location 



Location ■ / Vol ume s i MyData/ in ai n -wo rk spac e / An d ro idLov E ro lAl s £ 

O Create project from existing sample 
Samples: Please select Z\ target 

Buil d Tar get 



Call the pvojedt u A*dvoidLove w This 
is the app name youv usevs will see- ^ 

Set the patkajc ***** to w a*dvoid- 
love". This will be used £>v the java 
package ***** '* Y ouv " P' ro j c ^' 

Leave w Cveate Activity” dhe^ked Call 
the Activity w ttaikuPisplay This will 
generate the behaviov dode tov youv 
sdvee* displaying the hauki. 



Target Name 


Vendor 


Platform 


API L 


□ Android 1.5 


Android Open Source Project 


1.5 


3 


[ ! Google APIs 


Google Inc. 


1.5 


3 


D Android 1.6 


Android Open Source Project 


1.6 


4 


O Google APIs 


Google Inc. 


1.6 


4 


! ! Android 2.1-updatel Android Open Source Project 


2, 1- update 7 


□ Coogle APIs 


Google Inc. 


2. 1- update 7 


O Android 2.2 


An droid Open Source Project 


2.2 


8 


n Coogle APIs 


Google Inc. 


2.2 


8 




AndroidLove 



Properties 

Application name: 

Package name: 

■ Si Create Activity: HaikuDisplay 

Min SDK Version: 



android-love 
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What's in an Android project? 



Wizards are great because they do a lot of basic setup 
for you. But what did that wizard do anyway? Here’s 
a quick look at the basic Android project that the 
wizard created. To look at the project contents, click 
on the “ Package Explorer ” tab in Eclipse. 



App Behavior in Java code 

The behavior of Android apps is built with Java 
code. This code controls what happens when 
buttons are pressed, calls to servers, and any 
other behavior that your app is doing. Your 
android projects have a source directory where 
all of the Java code lives. 



The Eclipse 
Package 

E*plovev -tab- 



Binary assets 



Great apps need to do more than just 
deliver great functionality... they need 
to look great doing it. You’ll be using 
images to style your app and give them 
custom polished looks. The images 
and other raw binary resources in this 
directory are included in your app. 



Resources and XML layoi 



For Android apps, layouts are primarily 
defined in XML rather than code. All sorts 
of other properties are defined in XML too 
- like string values, colors, and more. These 
XML files are stored in the res directory. 




Package Explo £3 






Hierarchy 



□ 






^Androi dLoye 
7 0 sr<T 

► i^gen (Generated Java Tiles] 

► An droid 2.2 



]cf An d roidMan if est.xml 
[P] default. properties 
pioguard.cfg 



Configuration files 



Your app now has Java code, XML resources, and 
binary assets that define it. Configuration files are 
the glue that holds all of it together. Everything from 
the title of your app on the Android home screen, to 
the different screens in your app are defined in these 
configuration files. 
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Run the project! 

At this point, your new project is all ready to run! 

The wizard not only setup a project for you, but also 
created a very basic runnable Android app. How 

cool is that! 

Test run your apps using the Android emulator 

The Android SDK includes an Android emulator 
desktop application that simulates a complete running 
Android device. It runs a full basic android operating 
system and the default set of Android apps. It’s 
obviously not a complete hardware Android device, 
but it’s about as close as you can get with hardware 
emulation! 



Y ou dan 
simulate toudh 
sdreen w fresses w 
by dlidking on 
the sdreen with 



your 



mouse- 



Running Android emulator- 

J/ 



5554:default 




The emulator 
also includes 
hardware 
buttons like a 
and 
droid 

bard buttons. 



J keyboard ay 
Y the Androic 
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Tqst DriVq 



To run an Android app from Eclipse, select “Run — > Run” 
and you’ll see a dialog that prompts you for how you want 
to run the project. Since your project is an Android app, 
select “Android Application” and click on “OK”. 

Alternatively, you can run your android apps by pressing 
the “play” button on the Eclipse toolbar. 



Ellipse -toolbar. 




Select Android 
Application 



Select a way to run 'an droid- love 1 : 




Cancel 



D C 



OK 



j 



•Press Ot 



But instead of seeing an Android app running, you’ll see 
the following dialog. 



Android AVD Error 

No compatible targets were found. Do you wish to a add new Android Virtual 
Device? 



C *2 ) ( ^ ) 
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what’s an AVD? 



Why won't the app run? 

The app didn’t run, and instead you 
were faced with a dialog with an error 
about a target not being found and 
asking you to create a Virtual Device. 




The app is fine to run. 

The issue isn’t with the app the wizard 
generated, the issue is that there no way to run 
it. Your Android development environment 
can built apps for multiple Android versions, 
hardware configurations and screen sizes. So 
when you try and run your app, the Android 
tools don’t know what type of device you want 
to run your app on. 

The solution is to create Android Virtual 
Devices (or AVD for short) that defines a 
particular device’s software version and 
hardware format to run your app in. You 
can think of an AVD as like a saved emulator 
configuration. 

Since you don’t have an AVD setup already 
(and there are no stock AVDs in the Android 
SDK) you have to make your own. 




V 

Tjq this! 




Click Yes on the dialog 
to take you to the AVD 
creation screen. 
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Setup an emulator configuration 



Clicking yes on the dialog to create a new AVD takes 
you to the Android SDK and AVD Manager window. 
This is the same place you configured the SDK, but 
now the “Virtual Devices” panel is selected. From 
here, you’ll be able to create a new AVD. 




Eh'tcV" 5IZ here, -this will give 
■the erwilator a 5lz MB viv-tual 

SD tard, general -testing. 

Skin: 

© Built-in: | Default (WVGA800) tj 

O Resolution: x 

Hardware: 

Property Value New...l 

Abstracted LCD density 240 

Max VM application heap si 24 
Device ram size 256 




] Override the existing AVD with the same name 



( Cancel 



_) ( Create AVD 




Click 

“Create 

AV D" 
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Tqst Drwq 



Now that you have an emulator configuration set up, run the app again. 
Run it the same was as before by pressing the play button in the toolbar. 
This will first launch the emulator and automatically install your app on 
the emulator and start your app. 



The ew'uld'bo'r you 
ton-Ci^uved 




Y<m- app running in 
■the emula-tor/ 



Cool! Your lirst working app ... 
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The AndvoU Tmulatot* 

This week’s interview: 

Getting to Know the Emulator 




Head First: Hey there, Android Emulator. I wanted 
to start by thanking you for joining us tonight. 

Android Emulator: Well, since I am software I do 
have to do what you tell me. Just kidding! Happy to 
be here, as always. 

Head First: Fantastic! Just to clear the air here, 
there’s been some confusion out in the development 
community. Are you a real Android device or, dare I 
say, an imposter? 

Android Emulator: I’m neither, actually. I’m not 
a hardware device, but I’m as close to one as you’re 
going to get with pure software. 

Head First: If you’re not a real device, why exactly 
should we use you? 

Android Emulator: There are some serious 
benefits to me being fully software. For starters, it’s 
easy to quickly test and debug your software without 
having to carry around a hardware device. Plus, 
since I’m fully virtual, I can run as different devices 
at the same time. If you didn’t use me you’d have to 
carry around a bag of phones\ 

Head First: Sounds complicated. How do you keep 
it all straight? 

Android Emulator: Well that’s exactly what 
the emulator configurations are for! They tell 
me everything I need to know, from hardware 
configuration (like screen size), and device 
capabilities (like wireless latency), and even the 
version of Android. Everything I need to know about 
what device I’m supposed to act like is right there! 

Head First: Neat! So not only is it easier to use you 
than a real device for testing, but I can test on all 
different kinds of devices and Android versions using 
you instead of keeping a stack of Android devices 



around! 

Android Emulator: Precisely my friend. Precisely. 

Head First: That all sounds great, but if there’s one 
thing I’ve learned it’s that nothing is ever that easy. 
What’s the catch? 

Android Emulator: The catch is that since I’m not 
a real device, there are some subtle differences in 
how I work than a real hardware device. 

Head First: For example? 

Android Emulator: Well, GPS is a good example. 
When I’m running, I sort of spoof a location based 
on your computers location, but I’m not really using 
GPS, so I can’t be your only test. Photos are another 
good example. I don’t have my own camera, so I 
have to fake it a little. 

Head First: Sounds like mostly hardware specific 
differences. 

Android Emulator: Pretty much. I am emulating 
Android hardware devices after all. 

Head First: I think I’ve got it. You’re really 
useful for basic testing, with a number of different 
configurations. But if I need to test something 
hardware specific, nothing beats real world 
hardware. 

Android Emulator: Bingo! 

Head First: Great. Thanks for joining us! Now, 
don’t you have some apps to run? 

Android Emulator: Sheesh! Always making me 
work! Anyway, always a pleasure. I’m off to help 
more developers test their apps! 
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next steps 



Let's get some feedback! 



You’ve just got your first (although pretty boring) 
app up and running. Before going on, let’s get 
some quick feedback. 



0 





It’s OK. You’re not that far off... 

OK, it’s true. Your app isn’t displaying a 
haiku. But take a step back and compare the 
app you have with the app that was sketched 
out. You’ll see they are pretty close. 
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Check for differences 

The app you have and the sketch for the app 
you want are pretty similar. The only difference 
is that the main text display is displaying a 
boring hello world message instead of the haiku. 
Now you just need to replace the boring string 
with the haiku and you’ll be done with the app. 




TKev both have titles. 

(M the title in 
already ">aUbes the sketch) 



Bo*fch have text ih - 
the body, but your 
app's text (the 
hello world s-fcu-PP) 
doeshjt *>at£h the 
sketch. 



But how do you 
7 change the string 
displaying in the app? 



Android LO\/e 



■> 



\ dreamed an phone 
open source and hachable 
Android ^or -the uoin! 





Start by looking at the layout 

There is an XML layout that was generated by the 
wizard. This is what control the visual display of 
your app. Let’s take a look at the layout and locate 
where the string is being set. 



you are here ► 



27 



screen layouts 



Locate the layout 

Android layouts are defined in XML There was one 
layout created for you by the wizard called main . 
xml. Navigate to / res /layout /main . xml in the 
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View the layout 

When you double click main . xml and open it, you’ll 
this new pane opened up in Eclipse. 



java - AndroidLQve/res/layajt/rnairi.xml - Eclipse SDK - /MvWork/work/head-first-android/book-test 



Ot- ® n ! i- E 
j § I » & i » ^ o *■ ^ * 



9*® $ 






| Ji JJva 



Package Ex pi Hierarchy| ^ Ef |oj main. xml £3 



B % 






^AndroidLove 
T ® src 

▼ {0 com. he adfirs llabs .an droid, lave 

► [7| HaikuDI splay. java 

► §§gen (Generated Java Files] 

► ^Android 2.3.3 
^assets 

▼ litres 

► l^drawable-hdpi 

► (2^drawable-ldpi 

► drawable-mdpi 

▼ £S layout 

► Rvalues 

jdj AndroidManifest.xml 
[P] default. properties 
© proguard.cfg 



Editing CDnfig: default 
3.7m WVGAtNex... ? Por... 



f Any locale Android 3.0 



t | I Create... I 



No... ; Da... ; ; Their 



(J) Palette 



Q Q dt €t it 



The maih-Xml -file 
opCh ih Ellipse. 



main.xml - Android Love/ res /layout 



■5 Si @ S 






I was expecting to 
see the raw XM L, since 
this is an XML file. 
What is this? 



This is a graphical editor provided by the ADT 

Many of the files used to build your Android apps are XML 
based. The ADT Eclipse plugin includes graphical editors for 
these files that help you edit them. 

Now that you’ve seen the visual representation of the XML 
layout, you can also view the raw XML that the editor is 
displaying... 
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what’s in a layout 



The layout XML 

The graphical editors are just a facade over 
the XML underneath. So don’t worry, if you 
want feel all super-coder, you can always jump 
in edit the XML source. Or you can use the 
graphical editors, or a mix of both! 



Java - AndroidLove/res/layout/main.xml - Eclipse SDK - /MyWork/work/head-first-android/book-test 



3 Cl I ffl B ] Q • 



©• © 6 & ] s j & jg ar j O' 1 & m 






t2 Package Expl S3 f; Hierarchy “ □ 



r ^Android Love 

▼ £§src 

▼ $ com. headfirstlabs.android. love 
► [J] HaikuDisplay.java 

► gen [Generated Java Files) 

► Android 2.3.3 
^assets 

▼ 2* res 

► £>drawable-hdpi 

► (S?drawable-ldpi 

► £^drawable-mdpi 

▼ & layout 

X main. xml 

► (Rvalues 

|a AndroidManifest.xml 
2) default.properties 
© proguard.cfg 



S 3 



1 □ 



<?xml version-"!. 0" encoding- "utf-8"?^ 

<LinearLayout xmlns : android- "http: //schemas .android. com/apk/res/android " 
android:orientation-"verticaZ ” 
android : layout_width- "fil l_parent “ 
android : layout_height- "f i l l^parent " 

<TextVi ew 

android : layout_width- "fil l_parent " 
android: layout_height- ”wrap_content" 
android: text- "&string/hel lo" 

/> ^ 

</LinearLayout> 



We're, is the sa»e 
information -from the 
yayhital display in 
te*t /ML -format- 



If] Graphical Layout] |V) main.xml 



?=? xml 

\ b & @ 



Android SDK Content Loader 



Sign in to Google... 



Click "the .xml -tab oy \ "the 

bo-btor* -fco view ibe yOVlL. 



therei we no 

Dumb Questions 



% Can I edit the XML text here, or do I have to use the 
graphic editor. 



% Can I use both the graphical editor and the text editor, or 
do I have to choose? 



: The graphical editor just graphically displayed the contents of 
the XML text file. If you update the XML code, Android will keep the 
graphical editor in sync. 



Sure you can use both! If you make changes in the graphical 
editor and switch to the text view, you’ll see your changes. 
Likewise, if you make changes in the text and switch to the 
graphical view, you’ll see your changes there too! So' switch back 
and forth as much as you like! 
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A closer look at the layout XML 

Android XML layouts consist of a number 
of user interface components called Views , 
and layout managers called View Groups. 

The generated main . xml layout has one 
ViewGroup with a single View inside it. 



The main- 
layout ><ML Code- 



1 



<?xml version="1.0" encoding="utf-8 " ?> 

<Linear Layout 

xmlns : android="http : / / schemas . android. com/ apk/ res/android" 
android : or ientation= "vertical" 
android: layout_width=" f ill_parent" 
android: layout_height=" f ill_parent M > 

<TextView 

android : layout_width=" f ill_parent" 
android : layout_height="wrap_content " 
android: text="@string/hello" 

/> 







The View£jv-oup, in -this 
ease a Lineav-Layou-t 
-Pills -the screen. 




The View inside the 
layout is a TextView, a 

View speti-Pitally **ade 
-to display text- 




main.xml 



Since the TextView is displaying text, the String must 
be set in there somehow. Let’s take a closer look... 



you are here ► 
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resource values 



Take a closer look at the TextView 



Android Views are declared in XML layouts 
along with a number of attributes to configure 
them. Let’s take a look at the generated 
TextView from the layout and look at it’s 
properties. 



The Texil/iew 
dedavaiioh 
-(Vor* maih Xml 



<TextView 

android: layout_width=" f ill_parent" 
android: layout_height="wrap_content M 

android: text="@string/hello" 

/> 



<r 



^ These )(/\/lL properties 
de-Pihe the width a*d 
height o-f the view. 

This attribute sets 
the text oy\ the view. 




Hold on, not so fast! The property seems 
to be setting the TextView's text to 
string/hello" but the app says "Hello 
World, HaikuDisplay!". What gives? 



Android loves resource properties 

It’s a good practice to move details of your user interface 
to property files. Developers have long since done this with 
text strings in their apps to spell check easier or prepare for 
internationalization. Similar needs hold true for colors, font 
sizes, image names and more! 

The “@string/hello” isn’t the string itself, but rather a 
pointer into a String property file. 

Now look at the property files and locate 
the String definition. 
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your first app 



Android value files 

Right below layouts in the res folder is a folder called 
values. This folder contains the Android resource value 
files for your app. Open the folder and you’ll see a single 
file named strings . xml. Double click strings . xml 
to open it. 






Navigate to the strings 
xml file in the Eclipse 
package explorer. Double 
click on the file to open it. 



Were is the Android 
Resources tile with 
the app’s strings. 



Let’s see what’s inside... 



you are here ► 
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string values 



Open the strings.xwl file 



Opening the strings . xml file will display another 
Android graphical editor in the main Eclipse pane. 





Geek Bits 



Just another graphical editor 

This is just another Android 
graphical XML editor. Click on the 
tab on the bottom right to view the 
raw XML if you want. This works 
with all XML file graphical editors. 



[oj main. xml j [a] sirirgs.xml S3 




The maw )(A1L showing 

na*>e/ value s-fcmings mesoumdes. 



<?Kml version- ''L 0 " encodi ng- 
<resources> 

<string name- "hello "VHello florid* HaikuDi splay 3 </string> 
<string name- "opp_nome">And raid Love </string> 

<yresources> 



[=11 Resources (T) strings-xml 



Clidk -the strings. 
%ml -tab to view 
the )<ML. 
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Look at the values 

You can edit any of the values by select an item 
from the list on the left of the pane. Once you 
select an item, a second panel will display showing 
the name and the value for that item. 




Y 

Tjq this? - 



Select the first element 
labeled "hello" from the list. 



Java - AndroidLove/res/values/strings.xml - Eclipse SDK - /MyWork/work/head-first-android/book-test 



• * 



o* # 6 & a jS r d J o- . & m . & & 4>* 



m % J Jav 



fa Package Expl £2 |» Hierarchy “ □ 



▼ fe^AndroidLove 
▼ GSfsrc 

▼ (J) com. hcadfirstlabs. android. love 
► 0 HaikuDisplay.java 

► ^5 gen [Generated Java Files) 

I- Android 2.3.3 
{^assets 
▼2* res 

► £>drawab!e-hdpi 

► £>drawable-ldpi 

► ^drawable-mdpi 

▼ & layout 

0 main. xml 

▼ (Rvalues 

X strings. xml 
[a AndroidManifest.xml 
2) default. properties 
@ proguard. cfg 



J & 

\ a EL @ [§> S 



a main. xml I |d] strings. xml S3 

'5' Android Resources (default) 

Resources (§)©®®(D©(DG]Az 



y hello (String) 
s)app_name (String) 



I • I 

Remove— 



!:>elett a 

\resou\rte 
tem to edit 



Attributes for hello (String) 

© Strings , with optional simple formatting, can 
be stored and retrieved as resources. You can 
add formatting to your string by using three 
standard HTML tags: b. i. and u. If you use an 
apostrophe or a quote in your string, you must 

either estape ii or enclose the whole siring in 



U Resources J0 strings.xml 



the other kind of enclosing quotes. 
Name* hello 

Value’ Hello World. HaikuDisplay! 



Android SDK Content Loa 



Oy\U selected, a new 
panel displays where you 
tan edit the name and 
value the item. 



Theme is the hello 
world stina displaying 
in the app / 



the other kind of enclosing quotes. 
Name* hello 

Value^ Hello World, HaikuDisplay! 










Now that you see where the string is located, where can you edit it? Can 
you edit the string in the graphical editor? In the raw XML? 



you are here ► 
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Edit the string 

With a resource selected from the Resource Elements 
list, the name and value are editable on the right panel 
(In this case labeled “Attributes for hello (String)”. Edit 
the “hello” Resource Element’s value to the haiku. 




The attribute na^e 
and value have 
editable text -fields. 
Cban^in^ them here 
will update the value 
in your app* 




Edit the Value of the hello Resource Attribute with 
the following text "I dreamed of a phone\ 
nOpen source and hackable\nAndroid 
for the win l". (The \n's make new lines so 
the haiku will display on three lines.) 



H | Remember to 
save your files. 

nf When y° u edit 

watch it. an XML fi i e 

in an Android 

graphical editor ; it generates 
the underlying XML. But that 
underlying XML is just like 
any other kind of text file to 
Eclipse and has to be saved 
after editing. After you make 
changes in a graphical editor ; 
make sure to save before you 
run. 
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Tqst Drug 



With the “hello” Resource Element updated with the poem, run 
the app again and make sure it shows your changes. 




Great jot! The haiku is displaying in your app. 



you are here ► 
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android toolbox 



You're off to a great start! 

You built your first app using the tools Google provides to 
help you get started quickly Your development environment 
is up and running with Eclipse, the ADT plugin, and SDK 
configured to use an up-to-date Android version. And you 
modified the basic generated app to make it your own. 

Stay tuned for a new feature that Pajama Death want toadd 
to the app... 
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Your Android Toolbox 

Now that you built your first 
Android app, you’re starting to 
build your toolbox of Android 
skills! 



y>stdllat»ov> Chetk L'»st 

0 Install Efcllpse Y°<* don't Kave it 
installed already)- 
9 Install tKe Android SP^- 
9 Install PKe APT fctli?se 
• Install tKe SpK packages. 

9 ConPigwe tKe APT- 

9 Build your awesome Android app! 



Projeet Conlenls 

^Screen layouts and resources (de-Pined 
# % behavior (defined in Java 



® Binary assets (like images and Ponts) 
included directly in the project 

# ConPiguration Piles (mostly )<ML) 







BULLET POINTS 



Get your Eclipse-based Android 
development environment up and running!. 

It’s a good idea to add the SDK directory to 
your path (while you’re in a configuration 
mindset) so you can easily run Android 
tools later from the command line. 

Setup an emulator configuration for you 
target Android version. And don’t limit 
yourself: feel free to setup a bunch of them! 

Create new Android projects using the 
Eclipse “New Android Project” Wizard. 

From there, modify the generated app to 
make it your own. 

Layouts are defined in XML and you can 
find them in /res/layouts. 

Values (like strings) are defined in Android 
Resource XML files. They can e found in / 

res/values. 

When you open an Android XML file in 
Eclipse, you’ll see a graphical editor to help 
you modify these files. If you want to view 
or edit the raw XML text, click on the right 
tab on the bottom of the editor. 

You can go back and forth editing XML 
files in the graphical editor or text. Just 
remember to save your files when you use 
the graphic editor! 



you are here ► 
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2 g!Ve your app an action 

. Adding behavior 




Apps are interactive! When it comes to apps, it’s what your users can do with 
your apps that make them love ‘em. As you saw in Chapter 1 , Android really separates 
out the visual definition of your apps (remember all that XML layout and String resource 
work you just did!) from the behavior that’s defined in Java code. In this chapter, you’re 
going to add some behavior to the AndroidLove haiku app. And in the process you’ll 
learn how the XML resources and Java work seamlessly together to give you a great way 
to build your Android apps! 



this is a new chapter 
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adding behavior 



Make your app interactive 




Yeah, we want it to do ^ 
something! I'm thinking 
we hide the haiku and add 
a button our fans have to 
push to show it! Let me 
sketch it out... 



We want the app to 
rock! But right now it 
just displays the haiku. 



Let's see what Pajama Peath have in mind.. 
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working with feeds 



r 



n 



THE PAJAMA DEATH APP UPDATE WITH AN ACTION DUTTON 

Pajama Death sketched out what they were thinking so you could build it. They added a button on top of the haiku, 
and hide the haiku on launch. Then when you push the button the haiku shows up! 



Add a button *to 
the app *to s bow 
the haiku 



Hide the 

haiku when 
the ap loads. 




The ha'*ku »s 
displaced a-ftev 
the t\\tV. 



I dreamed of a phone 
Open Source and Hackable 
Android for the win! 



L 



J 



If you’re thinking this looks great, but you 
have no idea where to start... turn the page! 
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the plan 



Here's how you're going to do it 

You’ve got some work to do. So let’s break it down into a few 
steps. First off, you’ll be starting with the AndroidLove 
app project form Chapter 1, and making a few 
modifications to it. 

Open the Android Love project now if you don’t still 
have it open from Chapter 1 . 



A 

D® this? 

.W 




Open the AndroidLove 
project from Chapter 
1 if you don't already 
have it open. 



1 

y d 1 9:09 


Android Love 


I dreamed of a phone 




Open source and hackable 




Android for the win! 


C r 



The AndroidLove 
app as you Ic-p-t i-t 
at the end o( the 
last ehaptev*. 



1. Add the button 



You’re going to add a new button to your app’s screen, 
Eventually, this button will show the haiku, but not 
in this first step. This is the first time you’ll be adding 
a brand new component to a screen and you’ll learn 
what components are available and how to add them 
to your app screens. 







Si Mil ■ 9:05 






AndroidLove 


The new 




^ Show me some Android love/ 


button- 




I dreamed of a phone 
Open Source and Hackable 
Android for the win! 



* 
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t Hide the haiku text 

After adding the button, you’re going to hide the 
haiku text. The button still won’t do anything and 
you won’t see the haiku text at all, but hey, you’re 
making progress! Here you’re going to learn about 
the different attributes you can set on your widgets 
from XML. 




The text 
is hidden. 



3. Make the button show the haiku 

Next, you’re going to wire up the button 
to show the haiku. This is going to be your 
first taste of Java coding as you connect 
the Java behavior to the XML screens. 

This is where the magic happens! 




The button 

action that 

shows the haiku. 










You’ve got your project open and you’re ready to start working on this 
new action. The first step is adding the button. Which file do you need to 
open to add the button? 



you are here ► 
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a new button 



Add the button 

You worked with the main . xml layout file in Chapter 
1 that defines the entire layout for your app’s screen. 
This is where you’re going to add the new button to 
your app. Open main . xmlby by double clicking on it. 
You can find it under / res /layout /main . xml. 

In Chapter 1, you edited the XML layout in the raw 
XML source. Now you’re going to add a component 
using the graphical editor. Click on the ‘Graphical 
Layout’ tab to view the layout in the graphical editor 
if it isn’t already showing. Notice all of the Views in 
the list on the left side of the screen. 




Open main . xml now. You 
can find it under /res / 
layout /main . xml. 



These are all o-f 
-the di-f-ferereb 
Views available -to 
you m Android- 




J a [L & E Q m"w 4 



You can add views to your screen by dragging 
them from the list onto your screen. 
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Adding a View Tip Close 



Let’s take a closer look at adding the button using the Graphical 
Layout editor. 



o 



Click on the button on the left panel and drag it to the top of the 
graphical layout. You’ll notice an dotted line display where the button is 
going render. Make sure it goes at the top. 




Clidk on the 
Button and 
drag it to 
the top o-p 
the layout- 



Drag the button all 
the way to the top 
and you II see an orange 
dotted line where the 
button will be added- 



After you add the button it’ll look like this. 



Here's the 

button you ^ 

just added- 



@+id/Button01 



I dreamed of a phone 
Open Source and Hackable 
Android for the win! 



© 



Now click back to the main . xml showing the XML. You’ll the first 
View defined in the file is the Button you just added! 




you are here ► 
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Fix the button text 

It’s great that the button is on the screen now, but not so great 
that the button text is showing up as “@+id/Button01”. Let’s 
see about changing that. 

Why is the button text showing up like this? 

To get to the bottom of this, compare the View XML 
declarations of the Text View displaying the hauki and 
the Button you just added. Focus on the text properties of 
each View. 

The haiku TextView android : text property is 
referring to the haiku string property in strings, xml . 



tteve's the button with the 
'weirdo button text showing 
I «*P as "0+id/Button 01“ 

/ 




The haiku Textl/iew 
declaration -from 
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Now look at the Button definition 

The Button definition’s android: text attribute 
value doesn’t have the “@string/” prefix. It just has 
“@ + id/Button01” as it’s value. 



The new Button 
)<ML declaration. 






The ahdroid : text 
attribute is ret 
to ButtohO/. 



■erriht) 



<Button android: text="@+id/Button01" 
android: id="@+id/Button01" 
android : layout_width="wrap_content" 
android : layout_height="wrap_content" 




main.xml 




[ Wait a second! There 
^ is no ButtonOl string 
property in strings.xml. 
What gives? 



The answer lies in the prefix... 

The value for the android : text 
property in the Text View is referring 
to a String resource in strings, xml. 

But there is no string resource for 
the Button! 



There are string properties^ 

£or “haiku” a*d “app_jnar*e” 
but nothing -for “ButtonOl” 




you are here ► 
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The ©string prefix 

Take another look at the haiku TextView text attribute 
and you’ll see it has a special prefix “@string/”. That 
special prefix tells the view rendering code to look into the 
strings . xml file for a string property. And even though 
the Button has a prefix before ButtonOl, it’s not the 
special “@string/” prefix so it doesn’t work. 

Using the ©string prefix 



<TextView android: text= "@ string /haiku" 

— — 1 

The Te*t\/ievx s -te*! has -the 

pre-Pi*- 



NOT using the ©string prefix 






<Button android: text="0+id/ButtonOl" 

\ l 

The Button doesn't have the 
special u $string/ w pre-fix. 



iWeidre no 

Dumb Questions 



O: If the Button is missing the @ 
string prefix, how is it displaying 
any text at all? 



If the Android view rendering code 
doesn’t detect the @ string prefix to look 
up a key in the strings . xml file, it 
renders the value in the android : text 
directly. 



O: Is that why the button says 
“@+id/Button01” because 
it’s rendering directly from the 
android: text property? 



Exactly. 



VL- Hey cool! So why are we messing 
with strings.xml file at all? Couldn’t I 
just put all of my strings directly in the 
layouts and call it a day? 

Technically, yes. But it’s not the best 
idea. The string resource element was 
designed to remove string constants from 
your layouts. It’s a good idea to keep them 
separate, and Android is setup to handle 
this out of the box. 
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Add a string resource for the button 

The fix for this is going to include two changes. You’ll 
need to add a new string property in strings, xml, 
and then you’ll need to update the Button definition 
in main . xml. 

Let’s start by adding the new string resource. Open 
strings . xml and click on the strings . xml. 

This is where you’re to add the new String property 
and you’ll do it directly in XML! 

Here is the format. 



Start the element 
with String. This is so 
android knows it s a 
String resource. 




3ive it a name, thats what 
you'll use to reteren£e this 
string in your layout- 



<string name=" haiku ">I dreamed of a phone \nOpen Source 
and Hackable \nAndroid for the win !</string> 




The value is the 
actual string you 
want to display. 




Below is the the contents of the strings. xml file. Add a new String property called 
“love_button_text” and give it a value of “Show me some Android love!” 

<?xml version="1.0" encoding="utf-8 ” ?> 

<resources> 

<string name="haiku">I dreamed of a phone\nOpen Source 
and Hackable\nAndroid for the win ! </string> 

<string name="app_name">AndroidLove</ string> 



</ resources> 



Add -the new yroyeyb/ hev-e- 
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EmdSe 

§OLot»OH 



Below is the the contents of the strings. xml file. You should have added a new String property 
called “love_button_text” and given it a value of “Show me some Android love!” 



<?xml version="1.0" encoding="utf-8 " ?> 

<resources> 

<string name= M haiku">I dreamed of a phone\nOpen Source 
and Hackable\nAndroid for the win ! </string> 

<string name = " app_name " >Andr o i dL o ve< / string> 



ft <s k^9. 

The element is a 
String element- 

</ resources> 



name— w love^button^te*t w >£hov/ me some Android love|</ string 



t 

The element has a 
name attribute of 
'love button text”. 



A*d the value is set 
to "Show me some 
Andvoid I ove|” 



Now you just need to use it! 

You just added the String resource for love_button_text. Now 
it’s time to plug it into the Button declaration in main . xml to set 
the text. 
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en your pencil 



Below is the main . xml layout. Now that you have the love_ 
button_text property, use it in the Button definition to set the 
text form the strings . xml resources. 



<?xml version= TT l . 0” encodings " ut f-8 " ?> 

<Linear Layout 

xmlns : android= TT http : // schemas . android . com/ apk/res/ android" 
android : or ient at ion=" vertical " 
android : layout_width=" f ill_parent " 
android : layout_height=" f ill_parent "> 

<Button android : id=" 0+id/ButtonO 1 " 

android : layout_width=”wrap_content " 
android : layout_height="wrap_content " 
android: text=" 

/> 

<TextView android: text=" @string/haiku" 
android : id=" 0+id/haikuTextView" 
android : layout_width=" f ill_parent " 
android : layout_height="wrap_content " 

</ Linear Layout> 



/> 



Use the W ®str'm</ W 
pv-e-Ci* f lus the String 
v-esouv£e name heve 
to have the Button 
ve-Pevente the String 
v-esouv^e you just added- 
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Below is the main . xml layout. Now that you have the love_ 
button_text property, you should have used it in the Button 
definition to set the text form the strings . xml resources. 



<?xml version="l . 0” encodings 11 utf-8 " ?> 

<Linear Layout 

xmlns : android= TT http : / / schemas . android . com/ apk/ res/ android" 
android : orient at ion=" vertical " 
android : layout_width=" f ill_parent " 
android : layout_height=" f ill_parent "> 

<Button 

android: id=" @+id/Button01 " 
android : layout_width="wrap_content " 
android : layout_height="wrap_content " 
android : text=" ove_buttofi_te*t " 

/> 

Here's -the pvc-Pix. 
telling -the view 

rendering to use a A*d here s the name o£ 

String \resou\rde the String resource to use- 

<TextView android: text=" @string/haiku" 
android : id=" @+id/haikuTextView" 
android : layout_width=" f ill_parent " 
android: layout_height="wrap_content " /> 

</LinearLayout> 
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Tqst Drove 



Whew! You added the Button, which had some weird text. And to fix 
that, you added a new String resource, and used that new String resource 
from the Button' s android : text attribute. Let’s see if it all worked! 
Run the app again... 



The button is displayed 
with the £o\rve£t text 
-(Vor* the string resource 



And it works! The button looks good! 



4| i 9:08 



AndroidLove 



Show me some Android love! 



I dreamed of a phone 
Open Source and Hackable 
Android for the win! 







hiding text 



Hide the haiku text 



Now that the Button is added and looking good, it’s time 
to move on to the next step: hiding the haiku text. 

How are you going to do this? 

Well, two strategies are probably coming into your head 
right now. You could remove the Text View and it back 
once the button is pushed or you could set the text to be 
invisible and make it visible once a user presses the button. 

Let's go with the invisible text option! 

OK, but that’s not a huge help, right? You need to know 
how to hide text. This is something new that you haven’t 
done yet and you need to know where to find out about 
new things in Android. Luckily, Android comes with great 
online documentation for just this reason! You can view is 
at developer . android . com/ reference. 





^ •+ C H '? developer.androld.com/reference/packaaes.html 



Qi “ & * 



developers 






Package index) Class index Package Index 



android 

android arressibilityservice 

android .accounts 
android animation 
android.app 
android app admin 
android.app. backup 
android .appwidgcl 
android bluetooth 

android. content 
android content pm 
android .contenues 

android datahaw 



Selects package to vk 






These are the Android APIs. 

android 

android .acccssibiiityscrvicc 

android. accounts 
android animation 

android.app 

android .app.admtn 

android app backup 



Provides device administration features at me system level, allowing 
you to create security-8ware applications mat are useful in enterprise 
settings, in which IT professionals require rich control over employee 

For more infhematinn, see the Device Administration developer guide 

Contains the backup and restore functionality availahla to applications 
If a user wipes me data on their device or upgrades to a new Android- 
powered device, all applications Dial have enabled backup can restore 

mo users previous data when me application is reinstalled. 

For more information, see me Data Backup developer guide. 

Contains the components necessary to create ‘app widgets', which 
users can emoea in other applications (such as me home screen) to 
guickiy access application data and services without launching a new 




Go to the online 
Android documentation 
now at developer . 
android . com/ 
reference. 
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Documettfafion ^a\]gafi«»n Up C'JoSe 

Let’s take a quick look around the Android online documentation 
to get acquainted. You can navigate to what you’re looking for by 
either selecting the package and class name, or searching for a class 
name in the search box on the top right. Now since you’re looking 
to update an attribute on the Text View, you need to look at the 
Text View documentation. 



1/Vhe* you dkk or> a dlass or a 
package, the ma'm panel will show the 
details (or what you've seledted. 



I-P you know the dlass you've 
looking (or, but now the package, 
fou dan type it in heve to seav-dh 
he dodumentation- 



i 



This av-ea lists all 
o( the padkes in 
the dodumentation. 
Clidk on one to 
view the package 
dodumentation. 

In this dase, the 
andvoidwid^et 
padkage is seledted- 






Out a padkage 
is seledted, this 
sedtion will show 
all ot the diasses 
in that padkage- 
In this cast, the 
"fext\/iew is seledted- 



ClTextView | A Lroid Develo; X 



C ill © develoWr.android.com/reference/android/widget/TextView.html 



developers 



Home 



SDK 



android.util 
android.view 
android.view .accessibility 
android.view .animation 
android.view.inputmethod 
android.webkit 





Blog 



□ f« 



0 



dalvik.bytecode 

dalvik.system 

java.awt.font 

java.beans 

java.io 

java.lang 

java.lang. annotation 

» lann raf 



3 )< 



TabHost 

TabHost.TabSpec 

TableLayout 

TableLayout.LayoutParams 

TableRow 

TableRow.LayoutParams 

TabWidget 

TextSwitcher 

TextView.SavedState 
TimePicker 
Toast 

ToggleButton 
TwoLineListltem 
VideoView 
ViewAnimator 
ViewFlinner 



0 



ee Navigation 



. Nested Classes XML Attrs Inherited XML Attrs Inherited Constants Inherited Reids | Ctors 
Methods Protected Methods j Inherited Methods | [Expand Af] 

Since: API Level 1 



Utlic class 

TextView 

extends View 

implements ViewTreeObserver.OnPreDrawListener 



iava.lana. Object 
L -» android.view.View 

■-♦android.widget.TextView 

►Known Direct Subclasses 

Button, CheckedTextView, Chronometer, DigitalClock, EditText 
►Known Indirect Subclasses 

AutoCompleteTextView, CheckBox, CompoundButton, ExtractEditText, MultiAutoCompleteTextView, RadioButton, 
ToggleButton 



Class Overview 

Displays text to the user and optionally allows them to edit it. A TextView is a complete text editor, however the 
basic class is configured to not allow editing; see EditText for a subclass that configures the text view for 
editing. 

XML attributes 

See TextView Attributes . View Attributes 






Summary 



you are here ► 
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Browse the XML attributes 

As you browse the documentation for Text View, 
you’ll notice it has a number of Java methods, but 
it also has XML attributes listed. That’s because 
internally, Text View is a complete Java class. 

Since you’re working with the main . xml layout 
definition in XML, focus on the XML attributes. 

Does any look interesting? You’re looking 
for something that can hide the text... 



o o o 



ClTextView | Android Develop x 



^ O it O developer.android.com/reference/android/widget/TextView.html 



☆ »a 



a 1, a 



developers 



Home 



SDK 



Blog 



android.view.accessibility 

android.view.animation 

android.view.inputmethod 

android.webkit 

dalvik.bytecode 

dalvik.system 

java.awt.font 

java.beans 

java.io 

java.lang 

java.lang .annotation 
java.lang.ref 
java.lang. reflect 

t " 3 



TableLayout 

TableLayout.LayoutParams 
TableRow 
TableRow.LayoutParams 
TabWidget 
TextSwitcher 

21 



Use Tree Navigation 



8 4 

* VTlnl 

/: 



"inherited Constants 

▼From class android.view.View 



/ 

This looks perfect! 



English 



□ Filter by API Lev 







containing a String, to be 
retrieved later with 
view.getTag( ) or searched for 
with 

view . f indviewwithTag ( ) . 


android:transformPivotX 


setPivotX(float) 


x location of the pivot point 
around which the view will rotate 
and scale. 


android :transformPivotY 


setPivotY(float) 


y location of the pivot point 
around which the view will rotate 
and scale. 


android:translationX 


setTranslationX(float) 


translation in x of the view. 


android:translationY 


setTranslationY(float) 


translation in y of the view. 


androidrvisibility 


setVisibility(int) 


Controls the initial visibility of the 
view. 





It says it can control the “visibility of a view.” That’s 
exactly what you want! Using this you can make the 
entire Text View invisible when the app starts up. 

So how does it work? 
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View XML attribute details 

If you click on any attribute, you’ll be taken to a 
section that details the usage of that attribute. Click 
on android : visibility, you’ll be taken to the 
detail section on it’s usage. 



Cliek here t © view 
tbe usage details -Cor 
android : visibility- 




Detailed usage (or 
android : visibility. 



This tells us the usage is like this: 



android : visibility 




This is -the name of the ></V|L attribute, 
which matches the name in the dots. 



Attribute values are 
always in quotes. ^ 

"invisible" 




Use invisible sinte you 
want to bide tbe view. 



you are here ► 
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making the text invisible 



Look in the URL ahtr you o 0 
to the Shdlroid-visibili-ty details 
you'll see View" in the URL 
«ow instead o-P "Textl/iew". 



It looks like you went to 
the documentation for View 
when you clicked on the 
android:visibility attribute, 
detail link. What gives? 




ence/ android/ viaw/View. html#att:f_android: visibility 



Cl View | Android Developers 
<- -> C <1 J © developer.ttndroid.com/referJr 



e/ttndroid/view/View. html#attr android visibility 



i 4 j iQi» A 



developers 



android textmethod 
android.toxt stylo 
android texui til 
ndroid.ubl 

android view.accessmiiiiy 

android view .animation 

android.viow.inputmothod 

android .weokit 

androld.widget 

dalvlk-bytocodo 

dalviK-systam 

jxvH Hwlfnnl 

java.beans 



□ Hler by Level 12 






I HyniillnlUtRr 
Menulnflater 
Mononfcvent 



andro (divisibility 

Controls the initial visibility of the view, 
st bo one of the following constant values. 

Constant Value Description 

visible 0 Visible on screen; the default valuo. 

invisible 1 Not displayed, but taken into account during layout (space is left for it), 

gone 2 Completely hidden, as if the view had not been added. 

This mrrHspnniis to thn glntal HltrihutH msourcH symbol vtsthtHf.v . 

Related Methods 

setVisibility(int) 




View is a base class that other widgets inherit from 

The View . j ava class is a base class with several cross widget methods, 
attributes, and constants. And if you look at the headers for both 
Button and TextView, you’ll see that they both inherit from View. 
The Android docs include superclass methods descriptions along with 
the locally implemented methods (but if you look close you will see that 
the android : visibility attribute was located in a section called 
Inherited XML Attributes). 
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Below is the main . xml layout code. Update this code with the 

android : visibility set to invisible. This will hide the 
Textview and with it the haiku text. 



<?xml version=" 1 . 0 " encoding="utf-8 " ?> 

<LinearLayout xmlns : android="http : / / schemas . android . com/ apk/ res/ android" 
android : or ientation=" vertical" 
android : layout_width=" f ill_parent" 
android : layout_height=" f ill_parent"> 

<Button android : text=" @string/ love_button_text" 
android: id=" @+id/Button01 " 
android : layout_width="wrap_content" 
android: layout_height="wrap_content " /> 

<TextView android: text=" @string/haiku" 
android : id=" @+id/haikuTextView" 
android : layout_width=" f ill_parent" 
android : layout_height="wrap_content " 



/> 

</LinearLayout> 



Add the 
a^dv-o'i d : visib'i I i-ty 
attribute here. 



you are here ► 
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Below is the main . xml layout code. You should have updated 
this code with the android : visibility set to invisible. 

This should hide the Textview and with it the haiku text. 



<?xml version=" 1 . 0 " encoding="utf-8 " ?> 

<LinearLayout xmlns : android="http : //schemas . android . com/ apk/ res/ android" 
android : or ientation=" vertical" 
android : layout_width=" f ill_parent" 
android : layout_height=" f ill_parent"> 

<Button android : text=" @ string/ love_button_text" 
android: id=" @+id/Button01 " 
android : layout_width="wrap_content" 
android: layout_height="wrap_content " /> 



<TextView android: text=" 0string/haiku" 
android : id=" @+id/haikuTextView" 
android : layout_width=" f ill_parent" 
android : layout_height="wrap_content " 



a voi d : vi si bi I i“ty — ^ m vi si b I c ^ 



/> 

</ Linear Layout> 



V fW S the andvoid-visibilrty attribute 
sc*t to invisible* This should bide “the 
whole haiku TextViow! 
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Tsst DriVq 



YouVe hidden the TextView with the haiku on it with the 
android : visibility attribute. Now run the app and 
make sure it worked! 



Setting the 

d : v'isi vib'i I i-by 
attribute to 'invisible 1 
bid tbe te*t 

The text is gone. Great job! 



button displaying AND the 
/ text is hidden. Now you 
\ just have to show the text 
q d when you press the button. 



Let’s get that button working! 
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Make the button show the haiku 

It’s time to start making that Button work! There is 
an attribute on the Button View for just this purpose 
called android : onClick. The value for the 
attribute is the name of the action you want to use. 



Let's use it now! 

Add the android : onClick property to the 
Button definition in main . xml. Give is a value of 
onLoveButtonClicked to be descriptive of what 
the Button is supposed to do. 
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Y^u II qet dh eiriroir like 



ou II qc 
his if \ 



this if you \ruh your 
app how 3hd press the 
buttoh. This is because 

ohLoveButtohClided 
•sh t de-fihed yet. 



Wait a second! What is 
onLoveButtonClicked? Is it more XML 
code that you're going to define in 
main.xml, or somewhere else? 



Actually, it’s a Java method. 
It’s just not written yet... 

So far, youVe updated the screen 
layout, added a new View to the screen, 
modified and added String resources. 
All of these changes control the way 
the app starts. But for the button action, 
you’ll be making a change that a user 
can initiate while the app is running- 
adding behavior to the app. And 
Android app behavior is defined in Java. 



AndroidLove AndroidLove Browser 




A Sorry! 



The application AndroidLove 
(process com.hcadfirstlabs. 
android. love) has stopped 
unexpectedly. Please try again. 




So, let’s define onLoveButtonClicked now... 



you are here ► 
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Refining onLovePuttonClicked 

So defining onLoveButtonClicked 
in the android : onClick property 
on the Button is calling some kind of 
Java method. But where is that method 
supposed to go? 

Let’s start by taking a look at the Java 
source code in your project and it’s contents. 



V^>wr project's 

Java source Code 
is dll ih hev~e. 





This is the package Com. 

head+irstlabs.ahdroid. 

love that you defined 
ih Project creation 
dialog ih Chapter /. 



This is the only Java 
source f ile in you r 
project Created by the 
new project wizard 



Only one Java source file created by the wizard? 
Let’s take a closer look at it... 
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The AndroidLove Activity 

The AndroidLove class is a subclass of a built 
in Android class called Activity. Think of 
an Activity as the Java code that supports 
a screen. And in this case, AndroidLove is 
actually the Activity that supports your main 
screen you’re defining in main . xml. 

Double click on AndroidLove . j ava and 
Eclipse will automatically open it in a Java editor. 



The souvte -for 
Andv-oidLovejava 



public class AndroidLove extends Activity { 

Andvoidtove extends 

Activity 

public void onCreate (Bundle savedlnstanceState) { 
super . onCreate (savedlnstanceState) ; 
setContentView (R. layout .main) ; 



This Code, is setting the view detuned 
in on the sdreen Vow'll see 

how it works soon! 




AndroidLove.java 



The button is expecting to call a method in this class. 



Since the AndroidLove Activity is 
setting the main . xml layout on the screen, 
the Android action code is going to look for the 
method defined in the android : onClick 
attribute here. The action code is going to look 
for a method in the following format. 



The method needs to take one 
argument o£ a \/iew. This is the 
view that was tlidked- 



public void onLoveButtonC licked ( View view ) 

\ The method name needs 
to mat^h the value o( the 
android-onCliek attribute 



you are here ► 
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Add the action method 

Let’s add the onLoveVuttonClicked method to 
AndroidLove now. Once this is done, we can run 
the app and press the button and it shouldn’t break. 





lesT DriV0 



Run the app now and press the button. It won’t perform 
any actions yet. But you also won’t see errors either. 




You ean run the app and diek 
the button now. Nothing will 
happen, but the app won t ( orU 
dose eithev*. 
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Implementing the action method 



Great work so far! The Button has an action method 
configured in the android: onClick property 
(onLoveButtonClicked). The onLoveButtonClicked 
method has an empty implementation in the AndroidLove 
Activity which you’ve verified is being called since the app 
doesn’t crash. Whew! 

Now it’s time to implement the onLoveButtonClicked 
method and make it show the text! 

Implementing the action in the onLoveButtonClicked 
method really consists of two parts. First, you need to get a 
reference to the Text View and then you need to set the 
visibility property to true. Sounds simple enough , right? 

Cool! Let’s get started... 



public class AndroidLove extends Activity { 

public void onCreate (Bundle savedlnstanceState ) { 

super . onCreate (savedlnstanceState) ; 
setContentView (R. layout .main) ; 



public void onLoveButtonClicke 



TextView haikuTextView = ^ 




view) { 



} 



Make a variable -to re-Pev-enee 
■the haiku 7e*-t\/iev/... 




Wait, how do you get a reference to the TextView? 



AndroidLove.java 



you are here ► 
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From XML to Java 



You’ve got a disconnect right now. Your screen Views 
(the Button and the TextView displaying the haiku 
are defined in XML in the main . xml layout. But you 
action code is defined in Java in the AndroidLove 
Activity. How are you supposed to get references to 
XML defined Views from your Java code? 




)<ML de^'m’rtions. 



main.xml 




XML 

defined 

1/iews. 




— 1 

TextView 



M- 



ttow do they talk 
to eacM other? 







Java source Code 

J 



AndroidLove.java 




The buttons 
action Code. 



on Love 
Button 
Clicked 



The T file 



To solve this, Android generated a special called the 
‘R’ file. This is a file of constants that allow you to 
get Java references to the TextView you defined 
in main . xml In fact, you can get references to all 
kinds of in app resources you define! But remember 
the String resources you defined in XML? You can 
get references to those too. 




Open the R file now. You 
can find it under gen/ 
com/headf irstlabs/ 
androidlove/R . j ava 
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The R file consists of a number of public static final 
constants, each one referring to an XML resouce. The constants 
are grouped into interfaces according to XML resource type. 

Your R.java should look like this: 



The If file Vay Tip Cl«se 




|**te\r£ates 
y ouf the 
donstants- 



public final class R { 

public static final class attr { } 
public static final class drawable { yb 

public static final int icon=0x7f 020000; 



Cohstahts 
ve-Perrihg -to 
resource. 



public static final class id { 

public static final int Button01=0x7f 050000; 

} 

public static final class layout { 

public static final int main=0x7f 030000 ; 



public static final class string { 

public static final int app_name=Qx7f 040001; 

public static final int haiku=0x7f 040000; 

public static final int love_button_text=0x7 f 040002; 



Android provides a number of utility methods for using these 
constants. Take another look at the onCreate method 
from AndroidLove . j ava where the screen layout is set. 
set Con tent View takes an R . j ava constant which was 
generated from the main . xml layout. 



public void onCreate (Bundle savedlnstanceState) 
super . onCreate (savedlnstanceState) ; 

setContentView (R . layout . main) ; 

} 




setCo*te»t\/iew 

is tailed with 
-the tons-tairrt at 
R.layout.w'a'm to 
set the layout 
de-Cmed i* warn- 
n.n\\ oy\ the street. 



AndroidLove.java 



you are here ► 
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fretting view references 



Setting the content view from the R file is nice and all, 
but what you really want to do is get a reference to the 
Text View! Well, Android provides another cool utility 
method called f indViewByld to do just that. The 
f indViewByld method is in the base class of Activity, so 
you can use it directly in the AndroidLove class since it’s 
a subclass of Activity. 

The f indViewByld method takes one parameter, the R 
constant for the View. But since the method is meant to be 
generic, it returns a View not one of the View subclasses 
(like Button, TextView, or any other View). It’s easy 
enough though, you just need to cast the result to the View 
you’re expecting. 



View R constants 
are in the f icT 
interface group 



Let’s see how this works for retreiving a reference 
to the button on screen. 



Make a re-Perende bo 
s-fcore -the returned V\tw 



Cast the returned \/iew to 
the appropriate View class 
you're looking -for. 



Pass the R.id ButW>l 
to tmdViewByld to $et 
a ret erenCe to the or 
sCreer button- 




public final class R { 

public static final class attr { } 

public static final class drawable { 

public static final int icon=0x7f 020000 ; 

} 

public static final class id { 

public static final int Button01=0x7f 050000 

} 

public static final class layout { 

public static final int main=0x7f 030000 ; 

} 




R.java 
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Give the textview an id 

Take another look at the id interface inside R . j ava . 
There is a constant for the Button but not for the 

TextView. Weird, huh? 

The issue here is that the R file constants for the Views 
are generated based on an android : id attribute in 
main . xml. 



<Button android: text="@string/ love_button_text" 

android: id="@+id/Button01" ' 

android : layout_width="wrap_content" 
android : layout_height="wrap_content" 
android : onClick="onLovebuttonClicked" / > 



This andhroidfid attribute 
dontrols tbe name o-P tbe 
donstant treated -for tbe 
Button in tbe R -Pile- 



<TextView android: text="0string/haiku" 

android : layout_width="f ill_parent" 
android : layout_height="wrap_content"\ 
android: visibility="invisible" /> J 



Tbere’s no android : id 
attribute de-f i ned in tbe 
7e*t\/ie>w dedlaration so no 
R -Pile donstant is dreated- 




main.xml 




There"s no android : id attribute defined in the Textview 
declaration in main . xml, so no R file constant get's generated. 
Don't worry though, you can just add one yourself! Below is the 
the Textview declaration in main . xml. Add an android : id 
attribute and give it a value of "haikuTextView" 



<TextView android : text="@string/haiku" 

android: layout_width="f ill_parent" 
android : layout_height="wrap_content" 
android : visibility=" invisible" 



/> 



you are here ► 



73 



java attributes 



l 



Solution 



There wasn't an android : id attribute defined in the TextView 
declaration in main . xml, so no R file constant get's generated. 
Below is the the TextView declaration in main . xml. You should 
have added an android : id attribute and given it a value of 
"haikuTextView"so an R file constant will getgenerated. 



<TextView android: text="0string/haiku" 

android : layout_width="f ill_parent" 
android : layout_height="wrap_content" 
android : visibility=" invisible" 

a^droid-id— w @+id/baiku7e%iView w 

/> 



Complementary Java methods 

Most of the properties you can set from XML can also be set 
from code. This is important since you need to make the haiku 
TextView visible from the v action in Java. Let’s take another look 
at the TextView documentation for android : visibility 
and look for the complementary Java method. 





l 


androiditranslationX 


setTranslationX(float) 


android:translationY 


setTranslationY(float) 


android:visibility 




\ » 



1 

setl/isibility is ■the 
tomylen>e*>tary method 
■to -the andvoidwsibility 

attribute- 




Method details 
•for seti/isibility- 



/ 



public void setVisIbility (int visibility) 

Set the enabled state of this view. 

Related XML Attributes 

android:visibilitv 

Parameters 

visibility One of visible , invisible , or gone . 



T 



The doths-fcatrb are m ike View base dass, so 
you da* v-e-Pev" io ibem as ViewV|S[BL£, View. 
INVISIBLE, a»d View.^ONE. 
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Tke Complete Action Magnets 

You've got all the pieces you need to write the onLoveButtonClicked 
method now! Below is the code for the AndroidLove Activity, but the 
method is onLoveButtonClicked blank. The magnets below contain 
all of the code fragments you need to finish the method. Use the magnets 
to complete the implementation. 






public class AndroidLove extends Activity { 

public void onCreate (Bundle savedlnstanceState) { 
super . onCreate (savedlnstanceState) ; 
setContentView (R. layout .main) ; 

} 



public void onLoveButtonClicked (View view) { 



} 



} 



AndroidLove.java 




j textView . setVisibility ( 

TextView textView = | 




This is a ^oKs-fcahi 
you £a* pass ih-fco 
setl/isibili-ty -to make 
"the l/iew visible. 



View. VISIBLE 



you are here ► 
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The Complete Action Magnets Solution 

Below is the code for the AndroidLove Activity. The magnets 
below contain all of the code fragments you needed to finish the 
onLoveButtonClicked method. You should have used the magnets 
to complete the implementation. 



public class AndroidLove extends Activity { 

public void onCreate (Bundle savedlnstanceState) { 
super . onCreate (savedlnstanceState) ; 
setContentView (R . layout . main) ; 



£jet *tbe "Ie*t\/iew 
v-e-Cev-ende us'mcj -the 
R dons-tant- 



public void onLoveButtonClicked (View view) { 



TextView textView — J 


| (TextView) 


f indViewByld ( 


1 


R . id . haikuTextView j 


Hj 





textView . setVisibility ( j^ iewy^siBLE^l 



£e*t Te*t\/ie>w visibility 
to true so its displayed- 




AndroidLove.java 



Let's run it now! 
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Tqst Drii/q 



Now that the onLoveButtonClicked method is complete, run the app and try it out. 





-TV>e was bidden, 
lou-t displayed when y ow 
tlitked tbe bu-fcW 



You did it! 

When you started the chapter, the 
AndroidLove app had no behavior, it 
didn’t do anything. But now you’ve 
made it do something! And to make 
that happen, you added a new view, 
created and used a new string resource 
for it’s text, built a button action in Java, 
and used the R file to help go back and 
forth between Java and XML. 



Great work! 




Your Adding Behaviour 
Toolbox 

Now that you’ve completely 
implemented a button action, 
you can start adding behavior to all 
your apps! 




Mak'mj a AtW 

* Use -the MU o"Ch* aUribuie -to 
detlare the »ame of Ibe atW •*«*>** 

,0 ? e,tbe Activity Ut delays U 
layout viitK the Button 

, Add a meibod wtb a »ame U 

onClitk a-tiv-ibw-te valve 
# Make sure Ibe meibod takes m a single 
Vievj as a ^aran'etev - 



■ Use the graphical layout editor to make 
adding new Views easy. 

■ Add new String resources when you need 
them (and add them to Strings.xml). 

■ Use the “@string/” prefix in your XML layout 
to refer to String resources. 

■ Explore the online documentation for all 
of the attributes you can set in your XML 
layouts. 

■ If you know what you’re looking for but don’t 
know where to find it, use the documentation 
search 

■ Get references to Views on screen by calling 
f indViewByid and passing in that 
view’s ID constant from the R file. 

■ Make sure your Views in your XML layout 
have android:id attributes set if you need to 
get references using f indViewByid. 

■ to use Use the android : onClick 

property on Button to add an action 
method. That action method will be called 
on the Activity that launched the screen, so 
make so to add the method. 

■ Remember all of the Java source is in the 
/src folder. 
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Pictures from Space! 





RSS feeds are everywhere! From weather and stock information to news and 
blogs, huge amounts of content are distributed in RSS feeds and just waiting to be used 
in your apps. In fact, the RSS feed publishers want you to use them! In this chapter, you’ll 
learn how to build your own app that incorporates content from a public RSS feed on 
the Web. Along the way, you’ll also learn a little more about layouts, permissions, and 
debugging. 



this is a new chapter 
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bobby loves space! 



Welcome to NASA 




6 Add lo My NASA Image Gatery 



Enter your address below to subscribe. 



Enter E-mail Address 



NASA's o£ 
the day site- 



3 NASA - Image of the the Da X 

^ ^ 0 ft O www.nasa.gov/multimedia/imagegallery/iotd.html 



MISSIONS 



NASA Home > Multimedia > NASA Images 



♦ Send # Share 



Image Archives 



I really wanted a telescope, but 
all I can find are these binoculars. 
Since I can't see space, I've been 
checking out the NASA image of 
the day web site instead. It's got 
a cool new picture of something 
about space every day! 



MULTIMEDIA 



CONNECT 



ABOUT NASA 



Search 



▼ Images 

Featured linages 

Image of the Day Gallery 
Image Usage Guidelines 

► Videos 
Podcasts 

► NASA TV 
Interactive Features 
3D Resources 

RSS Feeds 
Blogs 



mage of the Day Gallery 



HOME 



> Log In To MyNASA | 



NEWS 



Sign Up 



Download Image 

* Full Size >1024x768 

.800x600 



3 View Thumbnais 



The T riangulum Galaxy 



The Triangulum Galaxy is located 
nearly 3 million light years from 
Earth. And, in a study that pushes 
Ute limits of observations currently 
possible trom hartn. a team ot NASA 
and European scientists recorded 
the "fingerprints' of mystery 
molecules in the Triangulum 
Galaxy, as well as the Andromeda 
Galaxy. 



Figuring out exactly which 
molecules are leaving these dues, 
known as "diffuse interstellar bands' ▼ 



View more than 700 
NASA.gov Image of 
the Day features 
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Put what about phones? 

The image of the day site looks pretty good on a big 
computer, but not so hot on a phone. It technically works, 
but not without a ton of scrolling and zooming. There has 
to be something better ... 



I saw an RSS feed on NASA's 
site. Could you use that feed and build 
an Android app that reads it and displays 
the picture? That would be way cooler than 
hitting the website from my phone... 



Yes! We can write an app for that! 

Let’s put your newly developed Android skills to use 
and build an app that will let Bobby see the NASA 
daily image on his phone. He’s going to love it! 



you are here ► 
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picking the important feed content 



Plan out your app 



Before starting on your brand-new app, take a minute to plan it out. 
Since you’ll be building the app from he image feed from NASA, start by 
taking a look at the feed to get a feeling of what you have to work with. 

The feed is an RSS (Really Simple Syndication) feed. You can find out 
more about RSS feeds with a quick search of the Web, but for this app, 
just think of it as pure XML. 



Eclipse has a built-in XML editor that really helps to visualize the 
format of feeds like this. Go to http://www.nasa.gov/rss/image 
of the dav.rss and save the content locally on your computer as 
an XML file. Then you can open the XML file in Eclipse (which will 
automatically open the built-in XML editor) and view away! 



Uaoje ot -the day -feed 
>, saved totally as an 
)</VlL tile and opened in 
Ellipse's )<ML- editor- 



RSS header 
‘m-formatiorv 

general 
ih-forma-tioh 
3 bout the 
-Peed. 



Itt-formatioK j 

about the 
days ima^e- 



Metadata I 

about the 
ir*age. 
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^Mrpen your pencil 





There's a whole bunch of stuff in that feed! If you show it all, 
you're going to overload your users with information and miss 
the point of building a specialized mobile app for viewing the 
image of the day. At the same time, just showing the image 
would be pretty boring. 

Take a look at the XML view of the feed and pick a few things you 
think you should show. And make sure to say why you picked it. 
The first one is filled in for you. Add a few more on your own. 



Property to include Why include it? 



URL 




you are here ► 
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arranging your data on the screen 




There's a whole bunch of stuff in that feed! If you show it all, 
you're going to overload your users with information and miss 
the point of building a specialized mobile app for viewing the 
image of the day. At the same time, just showing the image 
would be pretty boring. 

You were to look at the XML view of the feed, pick a few things 
you think you should show, and make say why you picked it. 



Property to include Why include it? 



image URL I definitely want display the image, so 111 include the image URL. 



This is an image of the day app, after all! 

The )<M L feed doesn't indude the binary image 
data. But usmoj the ir^e URL, you’ll be able to 
doanload the ima^e and diaply it on the screen. 




image title 





item description 



The t't| Y / i)i help gw^kly.tell what the image is about. 

You'll need to make sure you get the Correct title and 
description, because the example feed Contains many of each. 

In the example feed, the image description is blank, but the 
item description is populated Correctly. 

If the image is Cool, users will want to read more about it- This 



isn't the most important information, but it's great to know. 



item pubPate NASA doesn't publish a new image every day (not on weekends, for example), 



so it helps to know when they did publish the image being displayed. 



Your answers may be slightly different and you may have picked a different 
field or two (and that's perfectly Well use the properties here, but 
there are several other perfectly good ways you Could build this app. 
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Screen Design Magnets 

To build your interface, add the View magnets at the bottom of this 
page to the screen. There is one View for each of the properties you 
picked from the RSS feed. 




Put the \/iews Oh 
the screen here 



The ima$e at the URL 
displayed in ah Ima^eView 
(This is a hew Component but 
doht worry, you II learh how 
to use it in a bit-)- 



Mon, 27 Dec 2010 00:00:00 EST 



Item description 
in a Te*t\/iew. 



This mosaic Image taken by NASA's Wide-fi M 
Infrared Survey Explorer, or WISE, features] 
nebulae that are part of the giant Orion 
Molecular Cloud-the Flame nebula, the 
Horsehead nebula and NGC 2023. Despite [ 
name, there Is no fire roaring In the Flame 
nebula. What makes this nebul a shine Is the 




bright blue star seen to the right of the cen' 



you are here ► 
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getting ready to start coding 



// 





Screen Design Magnet Solution 

You were to add the View magnets at the bottom of this page to 
the screen to build your interface. There is one View for each of the 
properties you picked from the RSS feed. 



the title is at the 
top so you know what 
youVe looking at- 



The date really dould 
go anywhere, but 
it s kind of a nide 
subheader isn't it? 




The image is -front and 
denter, stretdhed to 
the s'izjC o-f the sdreen. 



This mosaic Image taken by NASA's Wlde-fle 
Infrared Survey Explorer, or WISE, features 
nebulae that are part of the giant Orion 
Molecular Cloud--the Flame nebula, the 
Horsehead nebula and NGC 2023. Despite I 
name, there fis no fire roaring in the Flame 
nebula. What makes this nebula shine Is the 
bright blue star seen to the right of the cen 



The desdription is nide to have, but its 
definitely not the most important piede o-P 
data. Its also really big/ Best to keep it at 
the bottom of the sdreen, out of the way. 
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Time to start coding! 

Every good app starts with a good plan, and 
you’ve got one now (the selected fields from the 
RSS and the screen design). Now it’s time to start 
coding it. 

Here is how you’ll do it. 



o 



Create a new project 

You’re building a new app, so start a new project. 
Mobile apps are small and concise, so get used to 
having lots of little apps (and projects) around! 



© 



Store feed information locally 

Removing variables from development is a good thing. 
Store feed data locally, so you can focus on building 
your UI and not connecting to the feed. 



© 



Build the UI using the stored feed data 

You’ve got a design for the UI; now it’s time to execute 
it. Create layouts, implement UI functionality, and get 
the app up and running! 



Q Connect the app to the XML RSS feed 

Once the app is up and running, just plug it into the 
XML feed and get the live data. It really is going to be 
that easy. Promise! 



you are here ► 
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make a new clean project 



Create a Hew project 

Now that you’re ready to start coding, make a new Android Eclipse 
project. Launch the new Android project wizard in Eclipse by going 
to File — > New — > Android Project. 




88 Chapter 3 





working with feeds 



fret rid of the autogenerated 'Hello' stuff 

You’re not going to need the autogenerated Text View showing 
the default “Hello World, NasaDailylmage” text. So before you get 
going, delete the TextView and the the String. 



O 



Open strings.xml (under res /values) and delete the hello String. 



■fP 1 Android Resources (default) 

©©©©[sJQSCDAz 



Resources 

Elements 



© hello (String) 

© ap p_n ame (St rim g) 

Select the hello , 
string and eliek 
Remove--- 



Resources strings, xml 




Attributes for hello (String) 

© Strings ., with optional simple formatting, 
can be stored and retrieved as resources. 
You can add formatting to your string by 
using three standard HTML tags: b, i r and 
u. If you use an apostrophe or a quote in 
your string, you must either escape it or 
enclose the whole string in the other kind 
of enclosing quotes. 

Name* hello 



Value* Hello World, NasaDailylmage! 



Open main. xml (under res/layout) and delete the hello TextView. 



-■ Views =- 
© CestureOverlayVi 
© 5urfaceView 
© View 
© ViewStub 
® WebView 
@ AnalogClock 
@ AutaCompleteTe) 

© Button 
© ClheckEox 
© CheckedTextView 
© Chronometer 
© DatePicker J 

Graphical Layout main. xml 



•5 1 

□- 



android. ..TextView 



Layout Width 


► 


Layout Height 


► 


Prope rties 


► 


Cut 


sex 


Hi Copy 




|j| Paste 


3€V 


Delete 




Select All 


KA 


Show In 


► 



Select “the 
Te%'t\/iew> 
ditk a*d select 
delete- 



o 



Save your files. You now have a nice, clean app, without the boilerplate hello app content. 



you are here ► 
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store XML values for realitsic testing 



Store feed information locally 

Start by saving text values as string resources. Open 
strings. xml and add three new strings for the image 
title, date, and description. The easiest way to do this 
is to copy the values directly from the sample XML 
feed file you saved at the beginning of the chapter. 



sivihgs.xr* | W i-th -the hew 
tesi ih-PormaiioK added. 
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Save the image in your project 



Images are stored in your Android project as resources in the 
res directory. Gan you find a folder called draw able inside your 
project’s res directory? 



HevVs -the v-es 

directory, “the same 

plate your layouts 
and string vesouvtes 

ave located- 



N asa D ai I ylmage 

► 0src 

► gjgen [Generated Java Files] 

► ^Android 2.2 
§3? assets 



► l&drawahle-hdpi 

► (25?drawable-ldpi 

► ^drawable-mdpi 

► (S? layout 

► (Rvalues 

j a And roidMan i fest.xml 
Hi default. properties 



ttrwm. Thcvc av~e thv-CC 
ditfe\rcht drawable 
div*ettov*ics heve ... 




There are three different 
drawable directories under 
res. What gives? 



Ah yes, the folders are for different screen sizes. 

One of the great things about Android is how many devices it runs 
on... and how many devices your apps can run on! The price for 
that versatility is the need to support a whole bunch of different 
devices with a wide range of resolutions and screen sizes. 

You’ll learn more about supporting different screen sizes and devices 
later. For now, just add images to the drawable-hdpi directory. The 
default emulator will use the images in this directory. 



Y 

S Ivo fliis! 



Open up a browser and navigate to the URL for 
the image in the RSS XML file. Save the file to 
your project in the res/drawable_hdmi directory. 
Call it test_image.jpg. 



Now that you have stored your data locally, let’s build the layout! 



you are here ► 
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arrange the views in layout xml 




Below are magnets with the XML layout declarations for the views in your layout along with 
the the views they represent. Drag the the view XML magnets onto the layout on the next 
page of the exercise. This will complete the layout for the app. 



\/'ievj visudU 
V*eve, jwst <°' r 
ve£eve«te 



^ 9 e 




<4 



View XML 
dedav-a-fcio* 

t/ 



<ImageView 

android: id="@+id/ imageDisplay" 
android : layout_width="wrap_content" 
android: layout_height="wrap_content" 
android: src="@drawable/test_image"/> 




<TextView 

android: id="@+id/ imageTitle" 
android : layout_width="wrap_content " 
android : layout_height="wrap_content" 
android: text="@string/test_image_title"/> 



This mosaic Image taken by NASA's Wide-fleld 
Infrared Survey Explorer, or WISE, features three 
nebulae that are part of the giant Orion 
Molecular Cloud--the Flame nebula, the 
Horse head nebula and NGC2023. Despite Its 
name, there Is no fire roaring in the Flame 
nebula. What makes this nebula shine is the 
bright blue star seen to the right of the central 



<TextView 

android : id="@+id/imageDe script ion" 

android : layout_width="wrap_content" 

android : layout_height="wrap_content" 

android: text="@ string/ test_image_description"/> 



Des£v-ij>-tic 



Mon, 27 Dec 2010 00:00:00 EST 



tale 



<TextView 

android: id="0+id/imageDate" 
android : layout_width="wrap_content" 
android : layout_height="wrap_content" 
android: text="@ string/ test_image_date"/> 
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<LinearLayout xmlns : android="http : / /schemas . android . com/ apk/ res/ android" 
android : or ientation=" vertical" 
android : layout_width=" f ill_parent" 
android: layout_height=" f ill_parent" > 








Put the widget magnets here 
to Complete the layout- You're 
usmg LinearLayout, so you just 
need to arrange them with the 
Component at the top o-P the 
screen as the -first in the layout 
and Continuing down. 



</LinearLayout> 



you are here ► 
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see your progress 




Emc'tSe 

§OLot»OH 



Below are magnets with the XML layout declarations for the views. You were to arrange the 
the view XML magnets to complete the layout for the app. 



CLinearLayout xmlns : android="http : / / schemas . android. com/ apk/ res/ android" 
android : or ientation=" vertical" 
android : layout_width=" f ill_parent" 
android: layout_height=" f ill_parent" > 



<TextView 

android: id="@+id/imageTitle" 
android : layout_width="wrap_content" 
android : layout_height="wrap_content" 
android: text="@ string/ test_image_title"/> 



Title 






\**f 






</LinearLayout> 



<TextView 

android: id="@+id/ imageDescription" 

android: layout_width="wrap_content" 

android: layout_height="wrap_content" 

android: text="@ string/ test_image_description"/> 



<ImageView 

android: id="@+id/ imageDisplay" 
android: layout_width="wrap_content" 
android: layout_height="wrap_content" 
android: src="@drawable/test_image"/> 

1 



<TextView 

android: id="@+id/ imageDate" 
android : layout_width="wrap_content" 
android : layout_height="wrap_content" 
android: text="@ string/ test_image_date"/> 
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Tost DriVq 



Run the app by selecting the project in the Exclipse explorer 
view and selecting run. You’ll have to select Android 
Application in the “Run as” pop-up that displays. 



NASA Daily Image 

Decorating the Sky 

Mon, 27 Dec 201 0 00:00:00 EST 




This mosaic image taken by NASA's Wlde-field 
Infrared Survey Explorer, or WISE, features three 
nebulae that are part of the giant Orion 
Molecular Cloud -the Flame nebula, the 
Horsehead nebula and NGC 2023. Despite Its 
name, there is no fire roaring In the Flame 
nebula. What makes this nebula shine is the 
bright blue star seen to the right of the central 



Nice! The screen is looking good! 

The running screen matches your design. Excellent work. 



you are here ► 
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picking the important stuff 



Hey, how come the 
description is showing but 
getting cut off. Shouldn't 
it scroll or something?!? 



Actually, scrolling would be a good idea! 

You never know how long the description might be. 
NASA could throw a whole book in there, for all we 
know! After all, they are in control of the feed. The best 
we can do is make our app visually scalable. A good 
way to do that is just to make the entire screen scroll. 
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dreamy if you could just 
ntire layout into some kind of 
d automatically scroll? But I 
a fantasy... 



you are here ► 
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make it scroll 



Use ScrollView to show more content 

ScrollView is a View you can add to your screens to make 
content scroll. ScrollView is a ViewGroup (Android’s name for 
layout manager). Use ScrollView by adding a child component to 
it, and the ScrollView will automatically scroll. 



This S£\rolll/iev/ waps the 
desdriptioh Tcxtl/icw ... 




<ScrollView 

android : layout_width="f ill_parent" 
android: layout_height="fill_parent" > 

><TextView 

android: text="0 string/ image_de script ion" 
android : layout_width="f ill_parent" 
android: layout_height="wrap_content" /> 

</ScrollView> 



The description TewtView 
is bioj enough to overtill 
the screen by itselt' 



... and here’s that 
7cx*t\/icv/ sdroll'm^ 
inside *thc S£v-oll\/iew| 



Molecular Cloud-tine Flame nebula, the 
Horsehead nebula and NGC2G23. Despite Its 
name, there is no fire roaring in the Flame 
nebula what makes this nebula shine Is the 

rinuH rii e 5 T n t0 ,he rl g bt of the central 
irV,' h K. ar ' Alnltak ' ls,he easternmost star 
In Orion s belt. Wind and radiation from Alnltak 
blasts away electrons from the gas In the Flame 

11 10 become Ionized and glow in 
visible light. The Infrared glow seen by WISE Is 
from dust warmed by Alnltak's radiation. The 

[ H ° rsehead neb ula appears In this Image 
35 3 fal ln * bum P 0,1 the lower right side of the 6 
vert cal dust ridge. In visible light, this nebula Is 
easily recognizable as a dramatic silhouette in 
the shape of a horse's head. It Is classified as a 
fhl k , ?ki U ?, b ?™ se the dense cloud blocks out 
WKp S | b / S h ’ of ,he glowing gas behind It. 
mlh ra : ed d f^ ctors can P eer Info the cloud 
Lrr g ° W K° f the dust ltself - A third nebula, 

, c 2b23 ' ^n be seen as a bright circle In the 

' iTfiAf ° f * “I 8 ! m ^ e - NQC 2 ° 23 15 classified as 
a reflection nebula, meaning that the dust Is 
reflecting the visible light of nearby stars. But 

H er f 5ees the infraired glow of the warmed 
dust ittlf. color in this image represents specific 






LOTS o( sdvollm^ 



How much should scroll? 



You can put one or more of the existing Views into the ScrollView. 

Any Views you add to the ScrollView will scroll, and the views not in 
the scrollview won’t. Since your goal is visual scalability, just make the entire 
layout scroll. This way, you can be gauranteed to have a scalable UI, even 
if unepxected information comes through the feed (like a really long title, for 
example). 

One catch using Scrollview is that it can have only a single child View. 
In the example on this page, the Test View is added directly as a child 
to the Scrollview. But for the whole screen to scroll, you need multiple 
Views to scroll. The solution is to add a complete LinearLayout (with 
multiple child Views) as the ScrollView’s child. 
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Add and amend the following code to use the ScrollView 
to make the entire screen scroll. You'll need to make the 
ScrollView the main layout. And since the ScrollView can 
hold only one View, you need to add the entire LinearLayout 
as the one ScrollView child View. 



A <LinearLayout xmlns : android="http : / / schemas . android . com/ apk/ res/ android' 
android: orientation= n vertical M r* 

V 



android: layout_width= n f ill_parent " 
android: layout height=" fill parent" > 



Mrap “this / 
entire \ 
layout m a \ 
SdrolMew. 1 



<TextView 

android: id="@+id/ imageTitle" 
android : layout_width="wrap_content M 
android: layout_height="wrap_content" 
android: text="@string/ test_image_title"/> 
<TextView 

android: id="@+id/ imageDate" 
android : layout_width="wrap_content M 
android: layout_height="wrap_content" 
android: text="0string/ test_image_date"/> 
<ImageView 

android: id="@+id/ imageDisplay" 
android: layout_width="wrap_content" 
android : layout_height= n wrap_content" 
android: src="0drawable/ test_image"/> 

<TextView 

android: id="0+id/ imageDescription" 

android: layout_width="wrap_content" 

android : layout_height="wrap_content " 

android : text=" 0 string/ te st_image_de script ion" /> 



^uidk Tip-* This needs to 
be in the root layout- It 
you add this layout to a 
Sdrolll/iev/, youll need to 
move this to the £eroll\/iev/. 



\ </LinearLayout> 



you are here ► 
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watching it scroll 




en your pencil 
Solution 



You were to used the ScrollView to make the entire screen scroll. 
You needed to make the ScrollView the main layout. And since the 
ScrollView can hold only one View, you should have added the 
entire LinearLayout as the one ScrollView child View. 



<£droll\/iew %rwlhs:ahdv-oid— ,, httpy/sdhc^^as.ahdroid.dom/apk/\rcs/ahd\roid ;, p.^ ^ ou y. cr * cm ber to move 

\ a«dvoid:layowt yareni" *rXs:a*d™d attv-iW* 

\ 1 trom the LinearLayout to 

BeywMW) andyroid:|ayou-t_hei3hi=”-fill_payrervt” > . the ScrollView (ihe ' r0 °t 



view) 



/ 



o( the 
£droll\/iew 

<LinearLayout srmlmr r^droig^Hy btp : / / schemas . andiU T d. umn/apk/ roe - / nndrni d 
android : or ient at ion=" vertical" 

The domflete android: layout_width="f ill_parent" 

r\oh— strolling android: layout_height="f ill_parent" > 

<TextView 

android: id=" 0+id/imageTitle" 
android : layout_width="wrap_content" 
android : layout_height="wrap_content " 
android: text="@string/ test_image_title"/> 

<TextView 

android : id=" @+id/ image Date" 
android: layout_width="wrap_content" 
android : layout_height="wrap_content " 
android: text="@string/ test_image_date"/> 

<ImageView 

android : id=" @+id/ image Display" 
android: layout_width="wrap_content" 
android: layout_height="wrap_content" 
android: src="@drawable/ test_image"/> 

<TextView 

android: id="@+id/ image Description" 
android: layout_width= n wrap_content" 
android: layout_height="wrap_content" 
android : text=" @ string/ test_image_description" / > 

</ Linear Layout> 

end o-f the 

</£droll\/iew>^^^ £troll\/iew 



The inner widgets remain 
untouched inside the 
LinearLayout 
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Tost Drii/q 



Run your app to check the scrolling you just added. You should 
see the entire screen scrolling. 



ig rill M 10:54 



NASA Daily Image 



Look how “the ENTIRE 
L'meav-Layout is 

sdvollmfy not just OY\t 
o( *the domfOKeirrls- 



This mosaic Image taken by NASA's Wide-fleld 
Infrared Survey Explorer, or WISE, features three 
nebulae that are part of the giant Orion 
Molecular Cloud -the Flame nebula, the 
Horsehead nebula and NGC 2023. Despite Its 
name, there Is no fire roaring In the Fiame 
nebula. What makes this nebula shine Is the 
bright blue star seen to the right of the central 
cloud. This star, Alnfitak, Is the easternmost star 
In Orion's belt. Wind and radiation from Alnitak 
blasts away electrons from the gas In the Flame 
nebula., causing it to become Ionized and glow In 
visible light. The infrared glow seen by WISE Is 
from dust warmed by Alnltak's radiation. The 
famous Horsehead nebula appears in this Image 
as a faint bump on the lower right side of the 
vertical dust ridge. In visible light, this nebula Is 
easily recognizable as a dramatic silhouette In 
the shape of a horse's head. It Is classified as a 
dark nebula because the dense cloud blocks out 
the visible fferht of the elowln? ?as behind ft. 



Everything is scrolling as expected. 

The scrolling is working properly. See how the entire screen 
content scrolls up and down together? That’s because 
you added the entire LinearLayout as the child to the 
ScrollView. 

Let’s show it to Bobby and see what he thinks! 



I+C\rc s the 

scroll bar. 
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start your parsing 




Oops! Almost forgot about the actual feed. 

Things are going really well with the design and layout. 
The screen looks like you want. Now it’s time to make 
it work the way you want... parsing the feed data in real 
time. 
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Choose a parser 

There are plenty of XML parsers out there, and Android has built- 
in support for three of them: DOM (Document Object Model), SAX 
(Simple API for XML), and XMLPULL. They each take a different 
approach to parsing the XML and each has benefits and drawbacks. 
We’re going to skip the big XML parser smackdown here (don’t worry, 
though, you can find plenty on the Web) and just pick one. 



Let’s keep it simple and start with SAX. 



Parsing \]p Close 

SAX works by firing events while parsing the XML. There is no random access with SAX. The 
parser begins at the beginning of the XML, fires appropriate messages, and exits. Here’s a quick 
sample of a few events that get fired in the first three lines of the NASA image feed. 




Feed X/WL 

line by line 



<rss version="2 . 0"> 




£A>< cvcnis 



O Start Element: rss 



<channel> 



<title> 

NASA Image of the Day 
</title> 



o 

o 

o 

o 



Start Element: channel 
Start Element: title 

Characters: “NASA Image of the day” 

End Element: title 



The parser for the NASA feed will need to listen for the SAX start element messages for the 
fields in the app (the title, image URL, description, and date) and cache the values. That's it! 



Let’s review some Ready Bake parser code to keep you moving! 
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ready bake parser code 




Reapy Bane 
0>pe 



SAX-based feed parsers look pretty much the same. Now that you understand 
how the SAX parser conceptually works, here is a parser packaged up as 
Ready Bake code that you can just drop into your app. Don’t worry about 
understanding everything; just add it to your project. But feel free to explore it! 



public class IotdHandler extends Def aultHandler { 

private String url = "http://www.nasa.gov/rss/image_of_the_day.rss"; 
private boolean inUrl = false; 
private boolean inTitle = false; 
private boolean inDescription = false; /> 
private boolean initem m false; 
private boolean inDate = false; j 

private Bitmap image = null; 
private String title = null; 

private StringBuffer description = new StringBuf f er ( ) ; 
private String date = null; 



Sinde -the events get 
tailed separately (like 
starting elements and 
their Contents), keep 
traek of what element 
youVe in ••• 



public void processFeed ( ) { 

try { 

( SAXParserFactory factory = 

SAXParserFactory . newlnstance () ; 

SAXParser parser — factory . newSAXParser ( ) 

XMLReader reader m parser . getXMLReader () ; 
reader . setContentHandler ( this ) ; 

InputStream inputStream = new URL (url ) . openStream ( ) ; 
reader. parse (new InputSource (inputStream) ) ; 

} catch (Exception e) { 



Configuring the 
reader and parser. 



Make an input 
stream from the 

feed URL. 



} 



Start the parsing! 



private Bitmap getBitmap ( String url) { 
try { 

HttpURLConnection connection = 

(HttpURLConnection) new URL(url) . openConnection ( ) ; 
connection . setDoInput (true) ; 
connection . connect ( ) ; 

InputStream input = connection . getlnputStream () ; 

Bitmap bitmap = BitmapFactory. decodeStream (input) ; 
input . close ( ) ; 
return bitmap; 

} catch (IOException ioe) { return null; } 

} 
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public void startElement (String uri, String localName, String qName, 



Attributes attributes) throws SAXException { 
if (localName . equals ("uri") ) { inUrl = true; } 

else { inUrl m false; } 

if (localName . startsWith ("item") ) { initem = true; } 

else if (initem) { 



if (localName . equals ("title") ) { inTitle = true; } 

else { inTitle = false; } 



if (localName . equals ("description") ) { inDescription = true; } 

else { inDescription = false; } 

if (localName . equals ("pubDate") ) { inDate = true; } 

else { inDate = false; } 



public void characters (char ch [ ] , int start, int length) { 



String chars = new String (ch) . substring (start, start + length); 




•••• 3hd i-P you Ve ih 
clcmch-t -that — 

you arc interested 

ih, £a£hc the 



if (inUrl && uri == null) { image = getBitmap (chars ) ; } 

if (inTitle && title == null) { title = chars; } 
if (inDescription) { description . append (chars ) ; } 

if (inDate && date == null) { date = chars; } 



£hara£ters. 



public String getlmage() { return image; } 
public String getTitle ( ) { return title; } 

public StringBuffer getDescription ( ) { return description; } 

public String getDate ( ) { return date; } 





from the Head First Android Development 
site and add it to your project. 



Download the IotdHandler code 
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connecting everything together 



Connect the handler to the activity 

Now that you’ve added the feed parser code to your project, you 
need to use it in your activity Start by instantiating the handler in 
your Activities onCreate method. 



public void onCreate (Bundle savedlnstanceState ) { 

super . onCreate (savedlnstanceState) ; 
setContentView (R. layout .main) ; 

IotdHandler handler = new IotdHandler () ; 
handler .processFeed() ; A — ~ - 

} 



Create the 
handler ... 



The app's not going to work with 
the parser yet. You're parsing the 
feed, but you're not setting the values 
cached in the feed on the Views. 



True, the values are cached in the handler, 
but never displayed. 

Let’s make a method called resetDisplay that will 
set all of the view data on screen. Then you can call that 
method in onCreate ( ) afterprocessFeed ( ) returns. 
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// 

1 





Code Magnets 

Complete the resetDisplay ( ) method below by retrieving 
references to the on-screen Views (using f indViewByld) and 
setting the values on those Views with the values passed in. Once 
this method is complete, you can use it to pass in the values from 
the feed. 



private void resetDisplay (String title. String date. 
String imageUrl, String description) { 



a >rdt>rtv\U to OY\ 

screen V\ e\w. Then set -the 

values oy\ those \/iew s to the 
cat\\tA values ( rom the parser. 



Here are your 

^ag^ets. 



(TextView) f indViewByld (R.^d. imageDate)^^ 



(TextViewKjndyiewByld^R^idTimageTitleT^^^^ titleView. setText (title)T^ 



TextView descrd^tionView= | ( imageView) f indViewByld (R . id . imageDisplay)^^^ 



dateView . setText (date) ; 



ImageView imageView = 




imageView . set ImageBitmap (image) ; | 


t ' 

1 


|~ descriptionView. setText (description) ; | 


TextView dateView = ~ j 


TextView titleView = 
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setting the feed data on screen 




Code Magnets Solution 

You were to complete the resetDisplay ( ) method below 
by retrieving references to the on screen Views (using 
f indViewByld) and setting the values on those Views with the 
values passed in. With this method complete, you can use it to pass 
in the values from the feed. 



private void resetDisplay (String title. String date. 
String imageUrl, String description) { 



TextView titleView = | (TextView) findViewByld (R. id. imageTitle) 



titleView. setText (title) ; 



£jet a re-Perende “to the title 
view and set the text to the 
dadhed value from the handler. 





TextView dateView = | 


(TextView) findViewByld (R. id. imageDate) ; || 




date View . setText (date) , 


n 

Same deal with date View: get 


£jet a v-e-fevenCe to 
the ImageView- 


|\ the \/iew re-Perende and set the 

te*t to the value -Prom the parser. 




ImageView imageView = 


(ImageView) findViewByld (R. id. imageDi splay) ; | 



imageView . setlmageBitmap (image) ; | 

Use the imaje -Pror* the -Peed 
parser and set it on the ImajeUiew. 



TextView descriptionView = 


i 


(TextView) findViewByld (R. id. imageDe script ion) ; ~ | 


descriptionView. setText (description) ; 





Finish up by getting the description View 

™ 3 » d ^ting the te*t with the 
cached description value. 
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Now you can finish connecting the handler in the 
onCreate ( ) method. Add a call to resetDisplay ( ) 
after handler .processFeed ( ) . This will take the 
cached values in the parser and set them in the Views screen. 



" 

resetDisplay (iotdHandler.ge tTi tie () , iotdHandler . getDate () , 
iotdHandler . getlmage ( ) , iotdHandler . getDescription ( ) ) ; 

The resetDisplay method is a helper method youVe about to write to 
populate the -fields on screen with the parsed data* 




Tost Drii/q 



Everything is plugged in with the parser. The parser is integrated 
with the activity, and the results from the parsing are displayed on 
the screen. You should be good to go. Go ahead and run the app. 




Hmm, a blank 
s£reem... 

Uh oh! The screen is gone! 




Clearly, something broke along the way. 
What broke? Where would you look to 
find out what’s broken? 
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no internet 



Find errors with logCat 

It’s OK; errors happen! The important thing 
is knowing where to go to find out what’s 
happening with your application, so you can fix 
things when they break. Android uses a built- 
in logging mechanism that outputs to a screen 
included in the Android Development Tools 
(ADT) called LogCat. 

Open LogCat by going to Window — > Show 
View — > Other, which will bring up the Eclipse 
Show View dialog. Expand the Android folder, 
select LogCat, and press OK. 



O Show View 

type fitter text 



£>a[>and 

Android 




Select LogCat- 



► ^General 
▼ (S? Android 

@ Allocation Tracker 
y Devices 
(T) Emulator Control 
ijfiFile Explorer 
@ Heap 




iff i Re source Explorer 
^Threads 



► £57 Ant 



Use F2 to display the description for a 
selected view. 



( Cancel OK 

A 



Cli<* 



After you click OK, you’ll see the new LogCat view in your Eclipse workspace. 

LogCat shows * a tab on 
the bottom of the sdreen. ^ 

]?t Problems Declaration B Console |'i^i LogCat ~ 



® ® © ® © | +// - a ^ ° p' 



1 L °g } 



pid tag 



■17 20 
■17 20 
■17 20 
■17 20 
■17 20 
■17 20 
■17 20 
■17 20 
■17 20 
■17 20 
■17 20 
■17 20 
■17 20 
■17 20 
■17 20 



28 : 04 . 075 
: 28 : 04 . 085 
28:04.124 
: 28: 04. 134 
28:07. 035 
: 28: 07.404 
28:08. 245 
28:08. 275 
28:13.505 
30:08.245 
30:08.245 
30:08.985 
: 30 : 09 . 035 
30 : 09 . 325 
: 32: 51 .695 



D 379 
D 379 
I 379 
D 379 
D 387 
E 387 
I 77 
I 77 
D 139 
I 7*7 
W 77 
I 77 
I 77 
I 77 
D 77 



AndroidRuntime 

dalvikvm 



Message 

Shutting down Ytl 
GC CONCURREHT freed 101K. 69$f free 317K/1024K, e 




Loj statements 



nal 0K/0K, paus 



idwp 

dalvikvm 
IotdHandler 
ActivityHanager 



ActivityHanager 

dalvikym 

InputReader 

InputReader 

ARMAssembler 

ARMAssembler 

ARMAssembler 

SntpClient 



adbd disconnected 

GC EXTERNAL ALLOC freed 42E, 53Sf free 2537E/5379E, external 334K/1 
IOException: iava . net . UnknownHostException: www.nasa.gov 
Displayed com . jonathansimon. nasa . iotd/ . Nasalotd : +4s21ms ['total +ln 



Displayed com . android . launcher 7 com . android . launcher 2 . Launcher : + 1 m< 

GC EXPLICIT freed 1 03E . 5lSf free 2395E75895E . external 2075K/2461K 
Device reconfigured: id=0x0 , name=gwerty . display size is now 32 0x^ 
Touch device did not report support for X or Y axis! .r-* 

generated scanline 00000077:03515104 00001004 00000000 \ 65 ippl | I 

generated scanline 00000177:03515104 00001001 00000000 \ 91 ippl Pf 

generated scanline 00000177:03515104 00001002 00000000 r 87 ippl ( 

reguest time failed: iava . net . SocketException: Address family not ; 



Filter: 



Here you Ye getting an |0£*£eption saying 
the host is not -found- That s odd, because 
you just went to nasa- gov -from your browser. 



379 -\dwQ 
337 dalvikvm 
337 ^IotdHandler 
77 f Activitvtlanaqier 

1 



adbd discly 



SS4E/1 (I 



IOException : i ava . net . UnknownHostException : mm . nasa . qov 
Oxiz- pl-a. y . | UlLd. 1 . 1 1 .-I rr rTTn n ti ti .i 1 !T.i ■ ; 



1 ms ( total + 1 n I 



Look for errors, they will show up in red. 
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Use permissions to gain restricted access 



The UnknownHostException is thrown here because you need 
permission to access the Internet. 

With all the cool stuff you can do with Android devices, it’s hard to 
remember that they are mobile devices. And because of this, Android is 
built to be super careful about making sure each app has rights only to the 
system resources it absolutely needs. The only way for your app to get 
those permissions is to request them. 



You can specity the permissions your app needs using a group of 
permission constants in AndroidManifest.xml. When users install your app 
from the Android market, they are prompted with a list of permissions that 
your app requsts. If they agree, they accept the permissions and the app 
installs. 

As an example, let’s take a look at the Android market install page for the 
official Twitter app. 



How do permissions work? 




android. permission . INTERNET 



android. permission . RE AD_CONTACT S 
android . permission . WRITE_CONTACTS 



Allow this application to access: 



Network communication 

Full Internet access 



All ot tte 



Your personal information 

Read contact data, write contact data 



Your accounts 

Manage the accounts list, act as an account 
authenticator, use the authentication 
credentials of on account 




android . permission . MANAGE_AC COUNTS 
android . permission . AUTHENT I C ATE_ACCOUNT S 
android . permission . USE_CREDENTIALS 



System tools 

Write sync settings, retrieve running 
applications 



android . permission . WRITE_SYNC_SETTINGS 
android. permission . GET_TASKS 



Your location 

Fine (GPS) location 



More 




\ W j A 

operated W 

-these tonstants- 



android .permission . ACCESS_FINE_LOCATION 



Enough about Twitter. Let’s add permission to your app! 
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Add a permission to access the internet 

The Twitter app had a lot of permissions, but 
your app just needs permission to access the 
Internet. Follow these instructions to add the 
Internet access permission. 



© 



Open AndroidManifest. xml 

The AndroidManifest file is 
generated by the new app wizard. 
You can find it in the root of your 
project. Double-click the file to 
open it. 



Naso Daily Image 
0src 

► (Generated Java Files] 

►- ^Android 2.2 
asset s 

► ^res 

id AndroidManifest.xmil 
[j] default. properties 




Find the 

)</V 1L -f ile the 

root 7 OUV " 
project- 



© 



Add a new permission to the manifest 

Just like all of the other Eclipse XML editors you’ve been working with, 
there’s a custom editor for AndroidManifest file. Click on the Permissions 
tab and press the Add button to add a new permission. 



■V 1 Android Manifest Permissions 


Permissions ® ® ® Az 






|" Adch <- UltK W- 


Remove... 


Up 


Down 








Manifest Application Permissions Instrumentation AndroidManifest. xml 





... select *the 
Permissions tab, 




112 



working with feeds 



o 



Select the permission type 

When the dialog opens, select Uses Permission and click OK. This tells 
Android that you want to use a permission in your application. 




o 



Select the permission 

There are a bunch of different permissions that you can ad to your 
application. Since you’re accessing the Internet to get the feed and the 
image, select the android . permission . INTERNET permission. 



•V Android Manifest Permissions 
Permissions 



0 © E ® Az 



(y)Uses Permission 



Up 



Attributes for Uses Permission 

(y ) The uses-permission tag requests a "permission" that the 
containing package must be granted in order for it to operate 
correctly. 

Name android. permission. INTERNET 

android. permission. INST ALL_LOCATION_PROVIDER 
android. permission. INST ALL_PACKAGE5 
android. permission. INTERNAL_SYSTEM_WINDOW 



android. permission. INTERNET 



android.permission.KIll BACKGROUND PROCESSES 



_9 

0 




The dropdown shows ALL -the 
permissions you tan add Seledt 

android-permission-INTERM-T. 



Manifest Application Permissions Instrumentation AndroidManifest.xml 



To apply the changes, save the file when you’re done. 
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fireside chat 



Fireside Chats 

Tonight’s talk: Permissions 



Android App: Android Operating System: 

What, seriously? I have to ask permission to do 
everything? Don’t you trust me at all? This is 
ridiculous! 

No, it isn’t ridiculous. I just need to be really careful 
about what I let you do unsupervised. 

Unsupervised?!? Look, I’m not a child! 

Well, listen, my user (who is also your user I might 
add) expects us all to work together to keep the 
whole phone secure. We can’t allow any viruses, 
unauthorized data access, unecessary Internet 
access, or other security no-nos to spoil their 
experience. Then we all lose! 

OK, well I kind of see that. But really, I have to tell 
you everything I do? Like everything ? That’s lame! 

Sorry, but you do. That way, I can tell our user what 
you’re planning on doing and they can decide if 
they will let you do it. 

Why can’t I just ask them myself? 

How can I trust that if the user says no to you you’ll 
actually listen? You wouldn’t even listen to me if I 
couldn’t kill your process! 

Hey man, that’s low. 

Well would you? 

You’re right, I probably wouldn’t. BUT ... 

I rest my case! 

Mffft! Well, I suppose I don’t really have a choice, 
do I? 

Nope! You don’t have a choice. My way, or the 
highway, buddy. 

Harsh. 
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Tqst DRIV0 



Now that the permissions are properly set, the app should 
run correctly, parsing the feed and displaying everything 
on the screen. Go ahead and run your app! 




Better, but not done yet! 

The feed is working (fantastic !), and fresh data is 
bing displayed on the screen. This is all great, but 
something is going wrong with the formatting. 



How do you find out what’s wrong? 
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picking the important stuff 




In fact, there is a built-in tool. 

That tool is rhe Android Hierarchy Viewer. This 
cool little tool from the Android SDK lets you do all 
kinds of introspection on your layouts and Views to 
get to the bottom what’s going on. 



* 

r 



V 

Do tM 



Launch the Hierarchy Viewer by 
opening a terminal, going to your 
<SDK>/ tools directory, and 
executing hierarchyviewer at 
the command line. 
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Find layout problems with HierarchyViewer 

When you launch the Hierarchy Viewer, the first thing you’ll 
see is the selection screen below. There are two main views; the 
view you’re going to look at inspects the screenshot and allows 
you to view your Views in a tree and see visual details about 
them. (The other screen is also useful; it shows a more visual 
tree structure with detailed attributes about each view). 



Hierarchy Viewer 






Load View Hierarchy ) 



Inspect Screenshot 




You II see -this sdreen 
when you laundh *the 
Hierardhy Viewer. 



^£ter you seledt “the 

em wlaW, tX * k here b> 
W*th the mam Wmdov-. 



Roomed in 
(zjoows where “the 
Crosshairs are) 



Y^our app . The red so^art 

surrounds the View seledted 
-the leftmost panel). 



Hierarchy Viewer 



(ur Save as PNC ) ( V Refresh Screens hot~) Refresh Tree (7 Load Overlay g|Sho/. in Loupe (J0Auto Refresh 



Icom.android. internal. policy.impl.Phor 
Ikl android.widget.LinearLayout 

▼ CD android, widget. FrameLayout 

fi android. widget. TextView 

▼ to android. widget. TrameLayout 

to android.widget.ScrollView 
O android, widget. LinearLayou 
11 android.widget.TextView 
B android.widget.TextView 
B aridroid-widyeUmayeVie 
1 android.widget.TextView 




Here is -the e*tra 
spade- INSIDE *the 
Ima^eView. (Y 
dan tell bedause 
the Ima^eView is 
seledted on the 
le-Ct and the red 
bo% indludes the 
e*tra spade). 
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aspect ratio 



Set the adjustView&ounds property 

You can see from the Hierarchy Viewer that the I mage View is too big. 
But why? The cause is actually that the apsect ratio is not preserved when 
the Bitmap from the Web is displayed. The aspect ratio is what keeps 
the width to height proptionally the same when you resize an image, 
and the image is being resized by the internal layout code to fill the screen 
width. 



adj ustViewBounds = false 



adj ustViewBounds = true 




Without keeping 
the aspect ratio 
the same, the 
‘"^ge stretches 
dud takes up too 

i*u£h spaee. 




wnne searcning me SKies Tor DiacK noies using 
NASA's Spitzer Space Telescope, astronomers 
discovered a giant supernova that was smothered 
in Its own dust. In this artist's rendering, an outer 
shell of gas and dust -- which erupted from the 
star hundreds of years ago -- obscures the 
supernova within. This event in a distant galaxy 
hints at one possible future for the brightest star 
system in our own Milky Way. Image Credit NASA/ 

M 




Wh en set to 
true, the image 
stretches to the 

edges ot the 
sdreen, and sets a 
height proportional 
to that width. 



If you set the adj ustViewBounds property to true in your layout 
XML, the extra space will go away. 






i*aih.xm| 
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Drove 



With the adj us tViewBounds properts upated in your 
layout, run the app again. This time, you should see the image 
resized correctly in the layout. 



The data doming 
looks good... 




While searching the skies for black holes using 
NASA's Spitzer Space Telescope, astronomers 
discovered a giant supernova that was smothered 
in its own dust. In this artist's rendering, an outer 
shell of gas and dust -- which erupted from the 
star hundreds of years ago -- obscures the 
supernova within. This event In a distant galaxy 
hints at one possible future for the brightest star 
system In our own Milky Way. Image Credit NASA/ 




And -the extra 
spate is $onc! 




It’s all coming together! 

The layout works just like you designed it, the feed parsing is 
up and running, and the layout issue with the Image View is 
fixed. 
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user feedback 




This is looking great! I'm super 
psyched to see how far you've 
come with the app so quickly! 



Really great work! 

You really did put your new Android development skills 
to use and built a whole new app! And you learned even 
more skills along the way You added scrolling layouts, 
image resources, and more. But most importantly, you 

built a cool app that made your users happy! 
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Your Android Toolbox 



Now that you have a cool 
RSS feed-parsing app 
in your toolbox, you can 
build all kinds of your own 
cool feed-based apps! 




BULLET POINTS 



■ When working with RSS feeds, download a 
sample of the feed and decide what content 
in the feed you want to use in your app. 



Built— Pvoblcrw £olvev-s 

# Use LogCat to view code log stated 

and errors -from youv a ?? s - 

$ Use HierartW/Viewer to a*aly« yo^ 
views and layouts. This ca» be c*W/ 
fcelfful when layouts or Views arent 
behaving as you might e*?<*t them to- 



1/icw Roundup 



0 Use . T r iV ' e * dis P ,a y text, /ou dan 
use .t^or Small text like labels, or really 
b'3 text like the Image descriptions. 

"Us e to display images. /«, ^ 

add your own images to the res directory 
and display them in an fmagel/iew. 

# WS . < ; St ' ro,l '/ i «u/ to make your Content 
scroll on screen. Sdrollt/iew can have only 
one chid Mew, So wrap multiple child views 
•n a layout to make them all scroll. 



■ Start with sax parsing, but explore the 
dom and xmlpull parsers to see if they 
will work better in your app. 

■ It’s a good practice to break your app down 
into small development pieces. For RSS 
feed apps that rely on the Internet, it’s 
perfectly acceptable (and even a good idea) 
to build out your app with test data and plug 
in the Internet services later. 

■ Add image resources to the res/drawable- 
hdmi directory (for now). These will get 
picked up by the Android compiler and the 
images will be available to your application. 

■ Use imageview to display images in 
your app. 

■ Use Scroliview when your app’s 
content is too big for the screen. (Just 
remember that Scroliview can have 
only one child). 

■ When things go wrong, use LogCat to 
look at Android errors and log statements. 

■ Make sure your app has the proper 
permissions configured in AndroidManifest. 

xml. 

■ Use HierarchyViewer to debug 
your layouts when your app isn’t displaying 
correctly. 



you are here ► 



121 




4 long-running processes 






When things take time * 



But not before I eat 
my breakfast, drink 
my coffee, finish 



iT ribui^ J '" f * 



It would be great if everything happened instantly, unfortunately, 

some things just take time. This is especially true on mobile devices, where network 
latency and the occasionally slow processors in phones can cause things to take a bit 
longer. You can make your apps faster with optimizations, but some things just take time. 
But you can learn how to manage long-running processes better. In this chapter, you’ll 
learn how to show active and passive status to your users. You’ll also learn how to perform 
expensive operations off the Ul thread to guarantee your app is always responsive. 



this is a new chapter 
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enhancement request 




I've been using the NASA app, and I love 
it! One thing, though. NASA updates the 
feed at different times every day. Do 
you think you could add a refresh button? 
Right now, I have to restart the app 
every time I want to check... 



Sounds like a reasonable request... 

But why is a refresh button necessary? You’ll 
want to make enhancements to your apps from 
user feedback, but it’s a idea to understand why 
you’re being asked for something. You have a 
request to add a refresh button. Let’s take a look 
at the Activity Lifecycle which will explain when 
the feed loads and why it isn’t enough for Bobby.., 
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The Activity Lifecycle 

Activity has a number of special methods (called lifecycle 
methods ) that get called during the lifecycle of the activity The 
onCreate ( ) method where you set the layout is one of these 
methods, and there are many more. A few of these methods 
are shown here, so you can see where the feed is (and is not) 
refreshed. 



This is where you process 
-the teed and set the values 
tov the on-si. reen views. 



f 







] 


1 


I — ] 


L f \ 

/ Your app \ 




onCreate() 




onStart() 1 


r 


“1 


' w 1 is running , 

™ ( front and ' " 

, \ center M 


onPause() 












1 \ / 





X 



1 



This is tailed when your 
afrtwvty is treated and 
typitally where layouts 
and ton-f i^ur ation 
otturs. 



This is tailed when your 
attivity is displayed on 
the streen. 

Call, an alert -from another 

+ PP !?rr ^ a etching 

to a di+lenent app. J 




When does the feed refresh? 

The feed refreshes only when the activity starts and the 
onCreate () method is called. The feed will never refresh 
once the app starts. Currently, the only way to get the app to 
refresh the feed is to exit the app and then restart it. 




This is only a portion o( 
the -full Activity litecyile 
You can -f ind the Complete 
diagram in the online doCs. 



You could override more of the lifecycle methods like 
on Resume ( ) , but that would only cover the case where the 
app is paused and restarted. You could also build some sort of 
auto-refresh mechanism, but that is very processor and battery 
intensive. Looks like the refresh button is a good idea after all. 
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start the layout 



Update the user interface 

A recurring Android user interface design pattern for 
on-screen actions, the button bar is a gray panel on the 
bottom of the screen holding one ore more buttons. This 
will work perfectly for the refresh button placement. 

Let’s build the button bar as a standalone layout and 
then add it the app’s current layout. Encapsulating parts of 
your fullscreen layout into separate smaller layouts can be a 
good way to organize layouts. And since LinearLayout 
extends ViewGroup, which itself extends View, you can 
add your entire new LinearLayout you’re making for 
the button bar as a child to your original ViewGroup. 



NASA Daily Image 

I A Supermasslve Black Hole 
I Frl, 21 Jan 201 1 00:00:00 EST 




T 

Button bar Oh -the 

Add screen in -the 

£oh-fca£-fcs app 



$utt on bar or ar 
email setup 



I In a single exposure, astronomers were able to 
I confirm the existence of a supermassive black 
I hole in the center of galaxy M84. They did this by 
I using the Hubble Space Telescope's more 

I powerful spectrograph to map the rapid rotation 



fay 
background 




A little space between tie button and 
the *tof 3rd bottom Jc *tbe button bar 



A little space 

between *tbe 
-text and *tbe 
button bar 



1 26 Chapter 3 




long-running processes 



Start with a basic LinearLayout 



LinearLayoutisa surprisingly functional layout manager 
for basic screen designs. You’ve already built a few screens 
using LinearLayout, and you’re going to build the button 
bar with it too. You will learn more about LinearLayout 
in the process, and don’t worry; you will also learn about 
other layout managers later in the book. 



The key to using LinearLayout for the Button Bar is to 
center the refresh button using the android : gravity 
attribute. Then you can fine-tune the layout. 



The be<yw\m^s o-f "the 
Wtton bar layout ri^ht 
just a LinearLayout 
/ vjith a text ered button- 



<Linear Layout 

android: orientation="horizontal" 
android: layout_width="f ill_parent" 
android : layout_height="wrap_content 

android : gravity="center 

> 

<Button android : text="@ string/ refresh" 

android : layout_width="wrap_content" 
android : layout_height="wrap_content 
< /Linear Layout> 



This is overkill, betause 
horizontal is the default, 
but it's 0|Ood to be sate- 




■ The button / 
is tentered- 



You’re off to a great start! Now start fine-tuning the layout ... 
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layout properties 



Use properties to tune-tune the layout 

With the button properly centered in the layout, let’s focus on fine- 
tuning the layout to get the colors and spacing looking like the button 
bar examples. Use these properties to get the layout looking the way 
you want. 



padding 

Padding controls the spacing between Views 
within a layout. Use Density Independent 
Pixels (DIP) to specify spacing rather than raw 
pixels to make your layouts really flexible. 



margin 

Margin controls the spacing between this 
View and the Views outside this layout. Use 
Density Independent Pixels (DIP) to specify 
spacing rather than raw pixels to make your 
layouts really flexible. 




android : background="#f f 8D8D8D" 



# FF 8D 8D 8D 

/ / \ 'Vbi™ 

Red 



android : padding="5dp" 



android : margin- top="5dp" 



background 

The background property can be set 
to an image resource, a color, and 
a few additional Android graphics 
types. Use a solid color for the button 
panel background, which is defined 
in 8- digit hexadecimal format (two 
digits each for alpha , red, green , and blue). 
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layout-width and layout-height 

Layout width and height can be set to predefined values of 
wrap_content and f ill_parent, as well as raw size 
values in pixels and DIPs. Using wrap_content makes 
the view just as big as it needs to be, while using f ill_ 
parent sizes the view to fill all of the space it can. 




Use v^af_fcwte*»t to «« 
the feutW This *ay, it 
be \«st as \o«5 as it needs to 
•fit the "vetv-esh te*t- 

Use -fill_pavent -for the 
bu-t-fcoh b ar s Linear Layout 
wid-th. This will make sure 
■tba-t ”tbe layou-t s-fo-e-fcdhes -to 
tbe ed<)es o\ -the sev-eem 



Scholar’s Comer 




PeKsity | hdcpchdcht Pixels (PIP) Android supports too maKy 
sereeK sizes -bo keep tradk/ Ws*m^ raw pi*el dimeKsioKs \ y \ layouts 
make your layout look ^ood ok oKe deviee a^d terrible ok 
others. Android provides aK ABSTRACT siziK^ measuremeKt called 
PeKsity (KdepeKt Pixels that is derived -from device attributes. 
This meaKs that you eaK de^'me layout attributes m PIP s 
that will look ^reat OK all Ahdroid deviees. TbaKks, Ahdroidl 
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build the layout 




Button Bar Layout Magnets 

Construct the button bar layout using the magnets below. 

Think about the width and height for each the button and the 
LinearLayout. And don't worry; you'll have a few extra magnets 
left over for widths and heights you didn't use. 



Here are your 

wa^eLs. 



<Button android: text="@string/ refresh'' 



t 



android: gravity="center" 



["wrap- content' 1 



‘'wrap- content' 1 



'fill- 



parent" 



android : background="#f f 8D8D8D" 




android: layout-height= 




android: layout-width= 



android: padding="5dp" 



android: layout-height= 



android: layout-width= 



<Button android : text="@ string/ refresh" 



android : margin-top="5dp" 



ID 



<LinearLayout 



| 


"f rprvh" i 




_</I'inearLavniif\ 




" f i 1 1— parent " | 


1 1 


J L - 1 - cl -L td 1 1 L I 


) 
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Now that you have the button bar layout, you need to add it to your screen. Below is a graphical 
representation of your current View/Layout hierarchy. Draw new views and layouts for the button 
bar Views (and any other views and layouts you need) to complete your layout. Also, remember, 
just like Scroliview that can have only one child, there can be only one root layout. 




The app layout without 
the button bar 




Display 
-fields -for 
-feed data 
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place the layout 




Button Bar Layout Magnets Solution 

You were to construct the button bar layout using the magnets 
below. Think about the width and height for each the button and the 
LinearLayout. you should have a few extra magnets left over for 
widths and heights you didn't use. 



<LinearLayout 



£et the 

batkyound tolor 
to a medium yef- 



android: layout-width= 


| "fill-parent" 


1 


android : layout-height= | 


| "wrap-content" | 



android : background="#f f 8D8D8D" 



The Width is set 

p 3 rent> so it •f ills the 
Width of the screen- 

The height is set to wrap 
Content; it shouldn't be the 
full height (since there is 
also the serollpdne). 



Center the 
button- 



” 7 ~. 7 „ 1 Add some spaein<\ between the 

wmmmmmmmmmmmmmmmmmmmmmm—mmmmmmmm—J button p3nel 3nd Scroll f3ne. 

android : padding="5dp" I - Add some spaeinj around the 

button inside the layout- 

android: gravity="center" 

Tj— ’ 

<Button android: text="@string/ref resh" I , 

— — 1 ^ width and 

height are set to 
wrap Content, so 
the button will si2* 
as it needs to based 
on the button text 



android : layout-width= I "wrap-content" 



android: layout-height= 




| 

I "wrap-content" 



</LinearLayout> 
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Emc'tSe 
§OLot»OH 



Now that you have the Button Bar layout, you needed to add it to your screen. Below is a 
graphical representation of your current View/Layout hierarchy. You were to draw new views and 
layouts for the button bar Views (and any other views and layouts you need) to complete your 
layout. 
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add the layout 



Update your app layout 

Add the button bar to the app layout in main, xml Also, 
add the wrapper LinearLayoutin the root, and add 
the button bar and the ScrollView to that layout. 




Update your layout in 
main, xml, adding the code 
for the button bar and the 
wrapper LinearLayout, 



Beginning ot wrayyer layout 

<LinearLayout xmlns : android="http : //schemas . android . com/apk/res/android" 
android : layout_width=" f ill^parent " 
android : layout_height= M f ill^parent " 
android : orientation=" vertical " > 



%mlns moved to 
root layout 



Existi hg 
layout 



<ScrollView ~xmin s : androi d^ 

android : layout_width="f ill_parent" 
android: layout_height=" L f ill_pare frt 

> Height changed to w rap-content; Vt 

otherwise, it would -fill -the screen, 
leaving no room tor the button bar. 



^andr oid. com /aprk/re a/ and roUeh 



<Linear Layout 



</ Linear Layout > 
</ScrollView> 



The J 
Complete ) 
button bar 
layout / 



<Linear Layout 

android : layout_width="f ill_parent" 
android : layout_height="wrap_content" 
android: background="#f f 8D8D8D" 
android : layout_marginTop="5dp" 
android :padding="5dp" > 

<Button android: text="0 string/ refresh" 
android : onClick="onRe fresh" 
android : layout_width="wrap_content" 



</LinearLayout> 



android : layout_height="wrap_content'' 
</ Linear Layout > 

End of wrapper layout 



/> 
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Drii/q 



After you update your layout in main, xml, run the app to verify 
your layout updates. 



tfl fi 9:17 H 



NASA Daily Image 

A Supermassive Black Hole 
Frl, 21 Jan 2011 00:00:00 EST 






And WHERE exactly is the 
button panel? All that time 
building it and it's gone?!? 



In a single exposure, astronomers were able to 
confirm the existence of a supermassive black 
hole In the center of galaxy M84. They did this by 
using the Hubble Space Telescope's more 
powerful spectrograph to map the rapid rotation 
of gas at the galaxy's center. The colorful zigzag 
provides the evidence. If no black hole were 
present, the line would be nearly vertical. The 
Space Telescope Imaging Spectrograph measured 




The tatW t>3v sV ' ow ' <i 
be hev-e - 








There has got to be something going on here. The widths 
and height look OK, and the LinearLayout should be 
resizing everything... right? What could be wrong? 
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weight property 



Use UnearLayout's weight property 



LinearLayout lets you assign a weight property that controls 
the resizing behavior of its child Views. For the button bar, you 
want the button bar to be just as big as it needs to and then have 
the ScrollView fill the entire rest of the screen. 



Weights are defined using the android : layout_weight 
XML attribute and have a number value of 0 or 1 . Using a 
weight of 1 makes the View stretch, while using 0 will make that 
View just as big as needed. 



S£v~olll/iew 

de-fihrfc ion 



<ScrollView 

xmlns : android="http : / / schemas . android. com/apk/res/android" 
android: layout_width="f ill_parent" 
android : layout_height="wrap_content" 

android: layout_weight="l" 



Button bar 
Lmeav-Layou-t 
definition 



A weight o-P I -Pills the screen 
with just enough spade le-Pi 
(or •the button bav-. 



<Linear Layout 

android: layout_width="f ill_parent" 
android : layout_height="wrap_content" 

android: layout_weight="0" 



A weight of 0 wakes *the 
button bav just as b >5 as 



Where do you find out about these properties? 

yy TJarV All of the properties used here (and many, many more) are documented 
v iy ^ in the Android online documentation. To learn about more of these 

properties, look at the documentation for your specific layout as well as the 
layout tutorials. Do a quick search at developer.android.com, and you’ll get right to it. 
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Tesr Drii/s 



Run the app again, and check that the layout weight modifications 
made the desired layout changed. 




Great work! 

The app is looking fantastic. Now just wire up the 
refresh button and you can show it to Bobby. 
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the refresh button 



Connect the refresh button 

You already have the feed-handling code working from 
Chapter 2. To keep your code clean and concise (and 
without duplicate code), move the feed-handling code to 
a new method called ref reshFromFeed ( ) . Then 
you can call the same feed-processing method from 
onRef resh ( ) and onCreate ( ) . 




1 38 Chapter 3 



long-running processes 




Tqst Drii/q 



Run the app again, and click refresh. This will update the app 
from the feed. 




NASA Daily Image 

A Super massive Black Hole 
Frl, 21 Jan 2011 00:00:00 EST 



* ml m 



NASA Daily Image 

A Supermasslve Black Hole 
Frlj 21 Jan 201 1 00:00:00 EST 



BSr 



In a single exposurej astronomers were able to 
confirm the existence of a supermasslve black 
hole fin the center of galaxy MS4. They did this b 
using the Hubble Space Telescope's more 
powerful spectrograph to map the rapfd rotatior 



In a single exposurej astronomers were able to 
confirm the existence of a supermasslve black 
hole fin the center of galaxy MS4. They did this by 
using the Hubble Space Telescope's more 
powerful spectrograph to map the rapid rotation 



i 



Refresh 




Nothin*} happened 
on the sdveen. 




Did the refresh 
work? I didn't see 
anything change on 
the screen... 



It’s not clear what’s going on here... 

Did the refresh work? Was the feed successfully processed? It’s 
totally unclear what exactly happens here when the user clicks 
on the refresh button. 
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the debugger 



Use the debugger 

The debugger is an incredibly useful tool for figuring out what’s 
happening while your application is running. The Android 
Eclipse plugin includes tools to seamlessly use the built-in 
Eclipse debugger to debug your Android apps, either in the 
emulator or even on a device. Follow these steps to debug the 
app and see whether ref reshFromFeed ( ) is getting called. 



© 



Get a breakpoint 

The debugger works by setting stopping points in your app 
called breakpoints. A breakpoint is like a scenic stop on 
a nice drive where you stop and take a look at what’s going 
on in that spot. 



o 
O 

This isn’t intended 
to be a detailed 
debugger tutorial. 

There is just enough 
detail here to debug the NASA app. 
Take a look at the Android and Eclipse 
documentation for more tips on using 
the Eclipse debugger. 




f 1$ax 



Double-dlidk in the 
gvay margin to set 
a breakpoint- 



-> 



input. closeQ; 
connection. disconnectQ; 
return bitmap; 

} catch (IGException ioe) { 
return null; 

} 

public void ref reshFromFeedQ { 

iotdHandler - new lotdHandlerQ; 
iotdHandler . processFeedQ; 

© resetDisplay(iotdHandler . getTi tleQ j iotdHandler . getDateQ., iotdHandler .getU 

public void onRef resh(View view) { 
refreshFromFeedQ; 



© 



Launch the debugger 

The debug button is just to the left of the play button in the 
Eclipse toolbar. It uses the Android launch configurations you 
already set up. Press it to launch the debugger. 



— fi 

Clidk this button to 
launth the debugger- 



Tke debugger 
automatically 
deploys and 
attaches to your 
app (on the 
emulator or a 
device). 
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O 



Monitor your app in the debug perspective 

The debug perspective is where you can see the state of your 
app running. (A perspective is Eclipse’s name for a stored 
collection of panels for specific work.) When you launch your app 
with the debugger, it will immediately hit a breakpoint, because 
onCreate ( ) calls ref reshFromFeed ( ) , which is where you 
set your breakpoint. 



This view shows 
•thread s-tadk -trades. 



This seletW ** 

Java to take 701* tatk to t 
standard tode ^ettwe- 



P’ 



J & jg El J P-’ O. 1 & © -#>. J P ^ ■ 






g Debug ^ J java 



^ Debug 22 



% B» BO ■ fr? 3. *3 .<f> -■ I 3^ ' 



^Thread (<1> main] (Suspended (breakpoint at line 66 in Nasalotd)) 

= Nasalotd. refreshFromFeedO line: 66 
= Nasalotd. onCreate(Bundle) line: 29 

= lnstrumentation.callActivityOnCreate(Activity, Bundle) line: 1047 
= ActivityThread.performLaunchActivity(ActivityThreadSActivityClientRecc 
= ActivityThread.handleLaunchActivity(ActivityThreadSActivityClientRecor[, J 
= ActivityThread .access $ 1 5 00(ActivityThread , ActivityThreadSActivityClie 
= ActivityThreadSH.handleMessage(Message) line: 928 
= ActivityThreadSH(Handler).dispatchMessage(Message) line: 99 
= Looper.loopO line: 123 

= ActivityThread.main(String[]) line: 3647 [▼ 



M= Variables 22 ®o Breakpoints 
Name 






Value 



B inllrl 
a title 
B url 

l mActivitylnfo 
I mApplication 
t mBase 
1 mBase 



false 

"Young Achievers" (id=830007801480) 
"http://www.nasa.gov/images/content/512483main_i 
Activitylnfo (id=830007749440) 

Application (id = 830007767144) 

Contextlmpl (id=830007768224) 

Contextlmpl (id=830007768224) 



ff\ Nasalotd.java 23 \J g| act ivity_main.xml 



public void refreshFromFeedO { 

iotdHandler - new IotdHandler(); 
iotdHandler . processFeedO ; 

resetDisplayCiotdHandler . getTitle(), iotdHandler .getDateO, iotdHandler .c 

1 0 
public void onRefresh(View view) { A 
refreshFromFeedO : 



r i a z H x s ® x L 



t Outline 23 
0 com.jonathansimon.nasa.iotd 
► ^ import declarations 
w © Nasalotd 

□ iotdHandler : IotdHandler 
a dialog ProgressDialog 
• A onCreate(Bundle) : void 

” ~ ■ resetDisplay(String. String, String, String) : void 

B gfetBitmap(String) : Bitmap 



This view shows 
you -the values 
O' P variables 
-that are m 
sdope- 



JJ] Nasalotd.java £3 \ J3j activity_main.Kml 


= □ 




public void ref reshFronfiFeedQ { 


- ■ 




iotdHandler - new IotdHandlerO; 


□ 




totdHandler.processFeedO; 






P 


resetDisplayOotdHandleir. getTitleOj iotdHandler. getDateO, iotdHandler. t 








0 





The arrow ne*”t -fco -the 
breakpoint mdi£a-bor lets you 
know -the line was reached- 



So the line was reached... but how does the user know? 
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progress dialog 



Add a progress dialog 

The ProgressDialog is a utility that shows a modal 
progress pop-up with customized information for your app. 
ProgressDialog is perfect here, because you can show your 
users status, but you also keep them from repeatedly pressing 
refresh and successively triggering refresh after refresh. 

How do you show a progress dialog? 

Show a ProgressDialog by calling the static method show 
on ProgressDialog. The show method returns a reference to 
a ProgressDialog isntance. Make sure to cache the reference, 
as you’ll need it to dismiss the dialog when you’re done with it. 




Geejc Bip> -i 



Modal means users can't 
interact with the application 
at all. All user input will be 
ignored. 



This is -the Lo&t to 



show a progress dialog. 
Change the title a*d 
detail text as heeded. 



ProgressDialog dialog = ProgressDialog. show ( 
this , 

"Loading", 

"Loading the image of the Day") ; 




Gall dismiss on the dialog when you’ve completed all of 
your work and the dialog will go away. 



dialog . dismiss ( ) ; 



Call this to dismiss 
the dialog. 
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your pencil 



Below is the ref reshFromFeed method with long-running 
code. Add the necessary code to show the ProgressDialog 
before the long-running work is shown. And remember to 
dismiss the dialog once the work is completed. 



public void ref reshFromFeed ( ) { 



Show the 
dijlo0 here. 



iotdHandler = new IotdHandler ( ) ; 
iotdHandler . processFeed ( ) ; 
resetDisplay (iotdHandler . getTitle ( ) , 
iotdHandler . getDate () , 
iotdHandler . getUrl () , 
iotdHandler . getDescription () ) ; 



The 

wovk ot *the -feed 
pvo£ess'm<y 



Pismiss *the 
dialog heve, 
now “that all 
the >wovk is 
done- 



} 
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add the progress dialog 




Below is the refresh From Feed method with long running 
code. You were to add the necessary code to show the 
ProgressDialog before the long running work is shown. 
You should have also dismissed when dialog once the work is 
completed. 



public void ref reshFromFeed ( ) { 

ProgressDialog dialog =■ P\rog\ressDialog.show( 

this, 

"Loading”, 

"Loading the image of the Day”); 



Show the 

pv-ogvess 

dialog. 



and 

Ml up date 
e °de regains 
un-touchecl. 



iotdHandler = new IotdHandler () ; 
iotdHandler . processFeed ( ) ; 
resetDisplay (iotdHandler . getTitle ( ) , 
iotdHandler . getDate () , 
iotdHandler . getUrl () , 
iotdHandler . getDescription () ) ; 



dialogdismissO; 




} 



Dismiss the progress 
sdreen, now that 
the work is done* 
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Tqst Drivg 



Run the app and click Refresh to verify that the ProgressDialog 
is working correctly. 




Well that’s not good. 

The whole point of putting in the 
ProgressDialog was to have it show while 
the long-running feed-processing work is occurring. 
The dialog code is in the right place, but for 
some reason it’s not showing. What could he 
happening? 



The problem is in the threading. 



iMa-t? Mo dialog 
a-ftev dlidkmg 
v-c-fvcsh ... 
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ui thread 



dedicated UI thread 

Android has a dedicated thread for updating the user interface (UI). It 
is responsible for repaints, layouts, and other graphical processing that 
helps keep the UI responsive and keeps animations smooth. The UI 
thread has a queue of work, and it continually gets the mot important 
chunk of work to process. 



rovrw 



U| -thread 



1 



Pper-fo 

Repaid layout Repaint 

Set te%t 






/Wore UI work... 







Why didn't the progress dialog display? 

The button action occurs in the UI thread by default. When the progress 
screen is shown, successive calls to repaint the screen are made to support 
the animation effect. But the process feed code also runs in the UI thread, 
which occupies the UI thread. By the time the UI thread could run the 
repaint code, the dialog was hidden. 



This expensive dal I on tall 
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How do you fix it? 

The solution is to keep non-UI work off the UI 
thread and all UI work on the UI thread. 




Moving the feed processing work off the UI thread and onto 
a separate thread allows the UI thread to focus on repaints. 

The first repaint shows the progress dialog, and the successive 
repaints make the animation happen. Then, when the feed 
processing is completed, the new thread puts an item in the UI 
queue to hide the progress screen. This switch back to the UI 
thread is important, because the non-UI thread can’t hide the 

dialog, which is a ui component. Keep the UI thread free 

ol expensive processing 
lor a responsive UI. 
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new threads 



Spawn a new thread for the long process 

The most straightforward way to get your long-running 
processing code on a different thread than the UI thread is to 
make an inner class extending Thread and implementing the 
run method inline. 

li\ 

There are about. a million di*f*feren*t ways to 
structure your dode “to deal with “threads. The 
joal here isn't to debate them, but to understand 
how to work with the Android Ml thread- 



public void ref reshFromFeed ( ) { 

dialog = ProgressDialog . show ( 
this , 

"Loading", 

"Loading the Image of the Day") ; 

Extend -thread- 

Thread th = new Thread () { 



Leave -this 
dode on -the U| 
-thread- 



public void run() { Implement run. 



All o*f -the 
-feed- 
prodessin^ 
^oes on -the 
new -thread 



if (iotdHandler == null) { 

iotdHandler = new IotdHandler () ; 

} 

iotdHandler . processFeed ( ) ; 
resetDisplay ( 

iotdHandler . getTitle () , 
iotdHandler . getDate ( ) , 
iotdHandler . getUrl ( ) , 
iotdHandler . getDescription ( ) ) ; 
dialog . dismiss () ; 



} 

} ; 

th . start () ; 



Don*t -forget to star-t 
your new -thread* 



} 
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Tqst Drove 



Run the app again, now with the expensive feed-processing code 
moved to the new thread. The dialog should show... but when you 
run the app, you will see an error. 



API Demos Drowser 



^ Sorry! 



Calculator Camera 



The application NASA Daily 
Image (process com. 

ionathansimon.nasa.iotcn has 

stopped unexpectedly. Please 

try again. 




Vow'll see this error dialog 
when rwn the a\>\>- 



FATAL EXCEPTION: Thread-11 




The cv-vov 
dcs<iv-ip-ti 0h 



android. view. ViewRoot$CalledFromWrongThreadException: Only the original 
^thread that created a view hierarchy can touch its views . 




at android. view . ViewRoot . checkThread (viewKoot . 3 ava 
at android. view. ViewRoot . requestLayout (ViewRoot . java : 629) 
at android. view. View. requestLayout (View. java : 8267) 



rPA I 

riginal I 



What’s the problem? 

The problem is the dismissing of the ProgressDialog. 
Properly managing your work on and off the UI thread 
means not only getting expensive work off* the UI thread, 
but also making sure that all necessary UI code occurs on 
the UI thread. 
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the handler 



Use Handler to get code on the Ul thread 

The dialog. dismiss () call needs to get back on the UI thread. 
Getting off of the UI thread is a cinch by creating a new thread. But 
that thread doesn’t have a reference to the UI thread to get code to 
execute back on the UI thread after the expensive work. That’s where 
Handler comes in. 

Handler works by keeping a reference to the thread it was created by. 
You can pass it work and Handler ensures that the code is executed 
on the instantiated thread. (Handler actually works for more than 
just the UI thread.) 



Start by instantiating a handler from the Ul thread 

The onCreate () method is called from the UI thread. Instantiate 
the Handler there, so you can get work back on the UI thread later. 



onCreate method trom 
the Kasalotd AttiV't' / 



Handler handler; Cache a Handler reference as a 

member variable, so you don't have to 

dvca*tc Handlers over and over a$ain. 

public void onCreate (Bundle savedlnstanceState ) { < 

super . onCreate (savedlnstanceState) ; 
setContentView (R . layout . activity_main) ; 



onCreateO executes 
on the Ul thread- 



handler = new Handler ( ) ; 

ref reshFromFeed ( ) ; 



Since onCreateO executes in the M| 
thread, Creating the Handler here 
makes a handler with the ability to 
execute Code on the M| thread- 



Pass work to the Handler using post 

Once you have a Handler instance, you can call post, passing it a 
Runnable to execute on the desired thread. 



handler . post (Runnable runnable) 



This is a standard 
Runnable, nothing 
Android speCitiC- 



Get ready to fix refresh From Feed () with correct threading... 
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Handler Magnets 

Use the magnets below to complete ref reshFromFeed ( ) with all of 
the necessary threading changes. The expensive feed-processing code 
needs to execute on a new thread, and the call to dismiss the dialog has 
to happen on the Ul thread using Handler. Assume the Handler was 
already instantiated for you in onCreate ( ) . 



Here are y°ur 










dialog — rrogressjjicixvjy . onv^w \ , 

"Loading", "Loading the Image of the Day") ; 




1 i 

new Runnable () { 
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adding a handler 





Handler Magnet Solution 

You were to use the magnets below to complete ref reshFromFeed ( ) with 
all of the necessary threading changes. The expensive feed-processing code 
should be executing on a new thread, and the call to dismiss the dialog should be 
executing on the Ul thread using Handler. Assume the Handler was already 
instantiated for you in onCreate ( ) . 



— — — • — — — - — — — — — ~ 

dialog = ProgressDialog . show (this , 

"Loading " , "Loading the Image of the Day") ; 



The dialog is tailed -Pr Ota 
the U| thread (where 
re*freshFrotaFeed is tailed 
-frota). 



Start a hew 
thread -for 
the attual 
-Peed tode- 



Thread th = new Thread () { 




public void run() { 


i 



if ( io tdHandler == null) { 

iotdHandler = new IotdHandler () ; 

} 

iotdHandler . processFeed ( ) ; I 



handler .post ( 


r 


1 




new Runnable 


0 { 






public 


void run ( ) { 



Post a new Ruhhable 
to the Hahdler. 



] 



Call resetDisplay 
ahd dismiss the 
dialog *frota the U| 
thread- 



resetDisplay (iotdHandler .getTi tie () , 

iotdHandler . getDate ( ) , iotdHandler . getUrl ( ) 
iotdHandler . getDescription ()); 

dialog. dismiss () ; I 




th. start () ; 
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Tqst Drug 



Now run the app and you’ll see the progress screen show while the 
app loads from the feed during onCreate () . You’ll also see the 
the progress screen show when you click the refresh button. 



o 



Start the app. 



USA Daily Image 






Q Loading 

loading the Image of the Day 






stronomi 
of a supe 



ice Tel< 












Great work! 



© 



Give the app a few 
seconds to load the feed. 




On app startup, 
the progress 
dialog will show 



Ho progress dialog, ' 
now "that "the -feed 
processing is Complete- 



© 



Watch the progress 
dialog get hidden. 



NASA Daily Image ^ 

A Super massive Black Hole 
Frl, 21 Jan 2011 00:00:00 EST 




In a single exposure, astronomers were able to 
confirm the existence of a supermassive black 
hole in the center of galaxy M84. They did this by 
using the Hubble Space Telescope's more 
powerful spectrograph to map the rapid rotation 




Now your users know that the app is doing 
something. Positive reinforcement goes a long way! 
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another enhancement 





Don't get me wrong, looking at 
the daily image is pretty cool... but it's 
so fleeting. I'd love to be able to save 
a particularly cool picture as my home 
screen wallpaper, so I can look at it later. 
Could you pull that off? 



This shouldn’t be too hard. 

It’ll be a snap to update the wallpaper. You’ve 
already got the image from the feed, so you just 
need to make the call to set the wallpaper using that. 
And you’ve already got a button bar layout in place, 
so you can just add a second button to the bar. 
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The code 

You can set the wallpaper by retrieving 
the WallpaperManager and 
setting the wallpaper by Bitmap. 
You’ve already got a reference to the 
Bitmap coming from the feed, so this 
should be a piece of cake. 




This is -the dode *to 
actually set the wallpaper. 




The design 

You already built the button bar to 
house the refresh button. And that 
is an ideal place to add a button to 
set the wallpaper. (More than two 
buttons in the button bar could be a 
problem if the button text is two long, 
but these two work great.) 




NASA Daily im a g e 

me tarly Cosmos 
24 Jan 2011 00 , 



rhe new seh 
tfallpapev button 



Bobby’s going to love this! Let’s get started ... 
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Add the "Set Wallpaper" button 

The button bar is built with a LinearLayout, so you can just 
add the new Set Wallpaper button directly to the button bar layout. 
LinearLayouts are horizontal by default, so you can add the 

android: orientation="horizontal" or simply rely on the 
default. 

Add the new button to the buton bar layout in main, xml : 



V' - * 

<Linear Layout 

android : orientation="horizontal" 

android : layout_width="f ill_parent" 
android : layout_height="wrap_content" 
android: layout_weight="0" 
android : gravity="center_horizontal" 
android : background="#f f 8D8D8D" > 

<Button android : text="@ string/ refresh" 
android : onClick="onRef resh" 
android : layout_width="wrap_content" 
android : layout_height="wrap_content 



LinearLayout de-faults to 
horizontal orientation, but 
it's a good idea to include 
the orientation attribute 
anyway- It makes your eode 
easier to understand later 
and froftefcts you in ease 
de-faults ehange- 



/> 



Add the u £et 
Wallpaper" 
button as the 
second dhild in 
the button bar 
layout- This 
will add it to 
the right of 

android: layout_height="wrap_con tent" /> the re-fresh 



<Button android: text="@string/setwallpaper 
android : onClick="onSetWallpaper" 
android : layout_width="wrap_content" 



</ Linear Layout> 



button. 




Update strings. xml adding the new string for the Set Wallpaper button: 
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Update the activity for the button action 

The feed-processing code already downloads the image from the 
URL and creates a Bitmap from the web resource. To complete 
onSetWallpaper (the onClick call declared in the layout), 
cache the Bitmap once decoded and pass that image to the 
WallpaperManager. 



public class Nasalotd extends Activity { 
private IotdHandler iotdHandler; 
ProgressDialog dialog; 

Handler handler; 

Bitmap image; 

— 1 * 

/Wake a member variable 
tor the bitmap. 



\] 


|h rePreshFromFeedO 


iotc 

ima 

/ 


^Handler .processFeed ( ) ; 

ge = getBitmap ( 

iotdHandler . getUrl ( ) ) ; 


£- 


»re -the bitmap in the 



i^age member variable 
atiev- processing -the teed. 



Add the onSetWallpaper method to your activity in Nasalotd . j ava : 



public void onSetWallpaper (View view) { 

Thread th = new Thread () { 

! public void run ( ) { 

WallpaperManager WallpaperManager = * 

WallpaperManager . getlnstance (Nasalotd. this) ; 

try { 

WallpaperManager . setBitmap (image) ; 



Sihde the durreht sdope 
is ah ihher dlass; you 
^ dah ejet a re-Perehde to 
“this' by prededmg it 
with the dlass hame. 



Setting the wallpaper 
£3h take a while, 
so kidk oPP a hew 
thread to get it oPP 
the U| thread- 



catch (Exception e) { 

e . printStackTrace ( ) ; 



This will do a 
default dump oP the 
exception to LogCat* 



th . start ( ) ; 
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test the wallpaper 




Drove 



Run the app to make sure the Set Wallpaper 
button is correctly configured in the layout. 





NASA Daily Image 



The Early Cosmos 

Mon, 24 Jan 2011 00:00:00 EST 



Stars are forming in Henize 2-10, a dwarf 
starburst galaxy located about 30 million light 
years from Earth, at a prodigious rate, giving the 
star clusters in this galaxy their blue appearance. 
This combination of a burst of star formation and 



First check that the button 
displays correctly... 



The button looks good. Now 
check and see how it works! 



Refresh Set Wallpaper 



The button is displaying 
Cov-vefrtly, bo\ri2jjh-fcally 
positioned next to the 
Refresh button. 



NASA Daily Image 

The Early Cosmos 

Mon, 24 Jan 201 1 00:00:00 EST 



Stars are forming in Henize 2-10, a dwarf 
starburst galaxy located about 30 million light 
years from Earth, at a prodigious rate, giving the 
star clusters in this galaxy their blue appearanc 
This combination of a burst of star formati 



( 

| Refresh | Set Wallpaper 

\ 



Setting the wallpaper requires a 
uses -permission element 

with android . permission . 
SET_WALLPAPER. Set this now 

in AndroidManifest.xml before you 
run the app. 
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What? Nothing 
happened. I clicked Set 
Wallpaper and now the 
, app is just sitting there! 



The button did actually work, but ... 

If you go to the home screen, you’ll see that the wallpaper was 
in fact set to the feed image. That said, the user experience 
is awefull Remember that getting your app working is just one 
part of bigger picture. In order to make successful apps that 
people want to use (and that will make you bags of money on the 
Android market!), you need to have a fantastic user experience. 

The issue here in setting the the wallpaper is that the change is 
happening off screen away from the user’s view. What you need is 
some positive reinforcement so your users know it worked. 



You could just show a ProgressDialog while the 
wallpaper is being set, but there’s a better way... 



Uidk oh the home soeeh and y ol 
see that the wallpaper was m fa< 
set to the mh -feed image. Ho 
deal with the user expert ende... 
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Use toast to give users reinforcement 

You could show a progress screen while the wallpaper is 
being set. But one of the inherent features of the progress 
screen is that it blocks users from doing anything. This is 
great when the feed is loading, because you want to block 
your users from interacting with the app. (This is what 
keeps users from repeatedly clicking on refresh.) 

But setting the wallpaper is different. You want to make 
sure to notify your users when the wallpaper is set, but 
you don’t want to keep them from doing something else 
in the app. For example, it would be perfectly acceptable 
for the user to set the wallpaper and to scroll down to view 
the long description while the wallpaper is being set in 
the background. This wouldn’t be possible if you used a 
progress dialog, because it blocks all user interaction. 



Toast 

___ passive 
~ notifications 



Progress Dialog 

= active, blocking 
notifications 



Android provides Toast for just such occasions 

Toast is a passive, non-blocking user notification that shows 
a simple message at the bottom of the user’s screen. A 
toast typically displays for a few seconds and disappears. 
Meanwhile, the user can still completely interact with the 
application. Here is what the app would look like with a 
Toast message when the wallpaper is set and the code to 
make it happen. 



NASA Daily Image 

The Early Cosmos 

Mon, 24 Jan 2011 00:00:00 EST 



Pass ih you*- 
w ad-fcivi-ty. 

Toast . makeText ( this , 

"Wallpaper set", 

Message Toast. LENGTH_SHORT ) . show ( ) ; 

/\ Time -to display 
-the -toast 






Stars are formingTrsYnize 2-10, a dwarf 
starburst galaxy located a bout 30 million light 
years from Earttf „ ,4 pHn^sgtous rate, giving the 
star clusters in I Wallpaper set e appearance. 
This combination - : - 1 aj’v a: : .r formation and 
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Complete the onSetWallpaper method below adding two Toast notifications: one for 
success and one in case of failure in the catch block. The Toast call must be made from the 
Ul thread. Use the Handler reference cached previously to make both of the toast calls on 
the Ul thread. 



public void onSetWallpaper (View view) { 

Thread th = new Thread () { 

public void run ( ) { 

WallpaperManager wallpaperManager = 

WallpaperManager . getlnstance (Nasalotd. this) ; 

try { 

wallpaperManager . setBitmap ( image ) ; 



Add the todt heve 

to tveate the -toast 
tovvCw-maW ">essage 
sebfoft the *allpapev. 



-for 




} catch (Exception e) { 

e . printStackTrace ( ) ; 



Add a toast message in 
the datdh blodk with the 
message "Erv-ov- settle 
wallpapev." 



}}}; 

th . start ( ) ; 
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Emc'tSe 
§OLot»OH 



You were to complete the onSetWallpaper method below adding two Toast notifications: 
one for success and one in case of failure in the catch block. The Toast call must be made 
from the Ul thread. You should have used the Handler reference cached previously to make 
both of the toast calls on the Ul thread. 



public void onSetWallpaper (View view) { 

Thread th = new Thread () { 

public void run ( ) { 

WallpaperManager wallpaperManager = 

WallpaperManager . get Instance (Nasal otd . this ) ; 



}}}; 

th . start ( ) ; 



try { 




to 

get a ve 



t ,he mrvev 



tlass- 



Wse -the handle*- -to 
P os t Vunnables to 
the Ul thread- 



wallpaperManager . setBitmap (image) 

bartdlevpost^ 

new Rurmable 0 { 

publid void \ruhO { 

Toast. r*akeTe%t( Nasa I otd. ibis, 

'Wallpaper set”, 

Toast. SHORT). sbowO; 



}}); 



/Wake a 

dohti\rrwatioK> 

•toast 




} catch (Exception e) { 

e . printStackTrace ( ) ; 

bar\dlerpost( 

new Rurmable 0 { 

publid void rur\0 { 

Sbo>/ another toast i-f ^Tbast makeTe^tWasalotd tbis, 

an caption is taught ''Error setting wallpaper”, 

ToastLE^TH_SH0RT).shov/0; 

H); 
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Dri1/q 



Run the app and click the Set Wallpaper button. Now you will see the 
wallpaper set and a nice toast conformation that lets you and your users know. 






Refresh 


Set Wallpaper 







| The {odst 

Con-Pik-Mndt'ion 
displays shov~tly 
attev -the ilidk. 



Fantastic work! Bobby and all of his friends are going to love this! 
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user feedback 




The app rocks... you totally came 
through! I think it's time to share this 
with more people than just my friends, 
though. Can you get it on the Market? 



Sounds great! Next stop... the Android Market! 



/ou'll have -the NASA app 
U P oh the matrkei i* the 
»e*t dhapter. Stay Wd' 



( 




CIHDROO 



market 
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Your Android Toolbox 



With proper threading and user 
feedback, you can guarantee 
your users a responsive app 
a rock solid user experience. 



The U| Thread 

. tte Ml 

olkevwise, the resyonsiwess o+ the IAI 
Will suffer- 

♦ Make su\re all Ml work odturs o, the 
U| thread. Calling Ul tode U ««n-MI 
threads Will throw throughout 

youv Code 

I 

^ive your users -feedback 

® Toast- Mse toast to passively display a 
message to your users 

# Progress Dialog: Use a ProgressDiaU 

^ block user input and 
display a message a«d progress on the 
s£reeh. 




BULLET POINTS 



■ Use extended properties of 

LinearLayout to fine-tune your 
screens (padding, margin, 
background, gravity, and more). 



■ Define layout width and height using 

f ill_parent and wrap_content. 
Use f ill_parent to maximize the size 
to fill the parent. Use wrap_content to 
make a View just as big as it needs to be. 



■ Use Density Independent Pixels (DIPs) 
when you need to define sizing or 
dimensions. This will ensure your layouts 
work on the most possible number of 
devices . 



■ Layouts can nest (you can add layouts as 
Views to other layouts). Just remember 
that too much nesting will slow down the 
layout and rendering of your screens. So 
use nested layouts with caution. (You’ll learn 
strategies for this in later chapters.) 

■ Use the debugger to trace code in the 
emulator or a device. 



■ Use a ProgressDialog to block users 
and display progress. 

■ Use Toast to passively notify users of 
progress. 

■ Both Toast and ProgressDialog 

can be extensively customized for your app. 

■ Keep expensive work off the Ul thread, and 
Ul work only on the Ul thread 

■ Use Handler to add Ul work to the Ul 
thread’s queue from non-UI threads. 
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5 multiple deVice support 

^ Run your app everywhere + 




There are a lot of different sized Android devices out there. 

You’ve got big screens, little screens, and everything in between. And it’s your job to 
support them all! Sounds crazy, right? Right now you’re probably thinking “ How can I 
possibly support all of these different devices ?” But with the right strategies, you’ll be 
able to target all of these devices in no time and with confidence. In this chapter, you’ll 
learn how Android classifies different devices into groups based on screen size as well as 
screen density. Using these groups, you’ll be able to make your app look great on these 
different devices, and best of all, with a manageable amount of work! 



this is a new chapter 
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sharing the app 



Bobby and all of this friends love the app! 

Bobby has been using the NASA image app all 
around schools and his friends have all been 
asking him for a copy. 



O 

0 



All my friends love 
my app and want to use it 
too! Can you publish it on 
the Android Market? 




Sounds great... but how about a 
limited audience? 

If Bobby and all of this friends want the app, 
likely others would too. And the place to share 
Android apps with everyone is the Android 
Market. But you would like to test the app out 
a bit before publishing it for the world. So you 
decided to do 

You installed the app on Bobby’s phone using the 
direct ADB install, but you can’t do that with all 
of Bobby’s friends since you don’t have access to 
all of their phones. 
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Can you share the app without using the market? 

Sure! You can publish the apk on any Webserver. 

Then anyone can download the app by navigating 
to the hosted APK on their Android device. 



© 



Upload your APK to a Webserver 

You can upload the APK to any Webserver. You can find the APK 
in your project’s bin directory and transfer it to your Webserver. 
(Note: You’ll need to add the mime type application/vnd . 
android . package-archive for the . apk extension or have 
your web administrator do this for you). 




© 



Navigate to the URL on the device 

Anyone who wants to install the app can navigate to the URL 
of the hosted APK from the browser on their device. This will 
download and install the app for them. (Note: Each user will have 
to configure the ‘Unknown sources; setting to allow non-market 
applications on their device). 




Let’s get some of Bobby’s friends to download the app... 



you are here ► 



169 



getting feedback 



Let's see what Bobby's friends have to say 

Bobby got a bunch of his friends to download 
the app over the air and play with it for a few 
days. Most people were pretty happy But two 
of his friends, Jesse and Shawn, came back 
with some great suggestions for improvement. 



Those buttons 
just seem like a waste 
of space. I want to see 
the space images! 



NASA Daily Image 

"RAIL Heads to the Moon 



Refresh Set Wallpaper 






Jesse 




Jesse’s wants to see more of ike 
image in landscape mode 

Jesse has a phone with slide-out keyboard, which 
forces the app into landscape mode. Technically it 
works, but Jesse doesn’t like how much vertical space 
the buttons are taking up. She would love to see more 
of the images instead of those buttons... 
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Shawn wants small screen phones 
to show more of the image too 

Shawn has a really small phone (300x350 pixels to be 
exact). Like Jesse, shawn thinks the buttons on the 
bottom are a waste of space on his extremely small 
phone. He’s love to see those buttons moved somewhere 
too. 



NASA Daily Image 

GRAIL Heads to the Moon 



Sat 10 Sep 2011 




Refresh Set Wallpaper 



Shawn also pointed out that the home 
icon is pretty Boring. . . 

Android uses a default icon on the home screen. It’s pretty 
boring though. Shawn really thinks you should update it 
to make the app look more polished. 




YouVe got to do 
something about 
those buttons 
and that cheesy 
home icon. 




Shavm 
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getting a handle on the issues 



So many devices, and so many issues! 

You knew there are all kinds Android devices out in the 
wild with different sizes and resolutions. But with such a 
simple layout, who would have though there would be so 
many issues? 

Some of the issues are also device specific 

Jesse and Shawn both have suggestions for improving 
the app in landscape mode and for really small screened 
devices. But you don’t want to change the regular app in 
portrait mode. The app you built at the end of Chapter 4 
still works great for those devices. 




Is there a way we can make 
everyone happy? Leaving the app as 
is for portrait mode, but updating 
it for landscape and small phones? 



On Android, you can make 
changes just for specific devices! 

With all of the different device shapes and 
sizes in the vast world of Android devices, 
you’ll often need to customize your apps 
for a few devices, like really big, or really 
small screens. Luckily, Android provides a 
mechanism for using a default layout and 
overriding those layouts for specific devices. 
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Make a plan 

Making your app work on all kinds of Android 
devices takes some careful planning. In the case 
of the NASA Image of the Day app, Bobby’s 
friends tested it out on all kinds of different 
devices and you’ve narrowed down just a few 
cases where you need to improve. 



Here’s what you’re going to do to get this app market ready in no time! 



Update the layout for landscape mode 

You can solve Jesse’s problem by creating a special layout for 
landscape mode. This way, you can leave the regular portrait 
screen as it was and make adjustments for the landscape version. 




Update the layout for small screens 

Shawn brought up a good point that the buttons are wasting 
space on small screens. But just like landscape mode, you want 
to be able to leave the regular layout alone and just make the 
modification for small screens. 




Update the icon 

Shawn also pointed out the boring default Android home icon. 
Since you’re goal is to get the app Android-market-ready, let’s get 
that fixed while you’re at it. 




OptWiz-e 
-the ap p -Cor 
landscape ^odc 



/Via ke the app look 
better oy\ really 
small streets. 



/Wake a 
Cooler i£oh. 



Turn the page to get started! 
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replicating landscape mode 



Preview landscape mode in your emulator 



The first issue to address is the lack of vertical 
space in landscape mode. But before you can 
fix anything, you need to be able to duplicate 
the issue reported by your users in your own 
development environment. In this case, you need 
to be able to view the app in landscape mode. 

You can do this in any running Android 
emulator by pressing CTRL — > F 1 2 . 




Press CTRL -> F12 to switch 
your emulator between portrait 
and landscape modes. 



SSS6:CoogleAPI10-WVCA800 



The scree* a*d 
"the er»ujd'£ov~ 
Controls switch 
to landscape 
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Update the design for landscape mode 

The main issue with landscape mode is the 
buttons. With the button bar gone, you’ll gain a 
lot more vertical space to show the day’s image. 



Put where could you put those buttons? 

There are a number of different solutions, but 
let’s move the buttons to the top right of the 
screen in line with the title and date. This will 
keep most of the screen as is and move the 
buttons where there is currently blank space. 



Move the :WtW 
here W 
' - mode 




You’ll gam all o-f -this 
vevtital space by moving 
tbe buttons. Oh "this phone; 
this is almost one -fi-fth o-f 
the entire screen height/ 



But how do you change the layout 
just for landscape mode? 



you are here ► 
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Create a landscape layout with the wizard 

You can created new layouts using the New Android 
XML File wizard. This wizard isn’t specific to layouts, you 
can use it to make all kinds of different Android XML 
resource files. Launch the wizard by going to File — > New 
— > Android XML File. 

The project will be filled in for you. Select the “Layout” 
radio button as the resource type and enter “main.xml” 
as the file name. Then for the folder enter “/res/layout- 
land”. This will automatically add “Landscape” as a 
Chosen Qualifier. 



Mew Android XML File 



Make sure 
y ou\r project ,s 
selet-ted hev-e. 

£n-le\r main. — 
Xml in "the -Pile 
name* 



as the Wder- 



New Android XML File 

Creates a new Android XML file. 



Pro CHQ5_NASA_lmage_of_the_Day 






Rle^ main.xml 
What type of resource would you like to create? 

0 Layout 0 Values 

0 Color List 0 Animator 

0 Preference 0 5earchable 

What type of resource configuration would you like? 



Available Qualifiers 
^►Country Code 
I'D Network Code 
Region 

Smallest Screen Width 
Screen Width 
Screen Height 

El Size 
□i Ratio 
^ Ul Mode 
Night Mode 
Rpjl Density 
IjpTouch Screen 
E&fj Keyboard 
|i!?l Tewt Innut 



GD 



0 Drawable 
0 Animation 



F f«j^er /res/layout-land 

5elect the root element for the XML file: 



© 



f Browse.... j 



0 Menu 

0 AppWidget Provider 




£nic\ring -the -land' 
a*t "the end o( -the 
--Polder au-toma-ti^ally 
adds -the Landscape in 
•the Chosen $uali-Piers. 



LinearLayout 



T1 



(_ Cancel J C 
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Where is the layout? 

The new layout you made is named the same as 
your existing layout, but your new layout is in a 
parallel directory called layout-land. This special 
construct allows the Android runtime to determine 
the best layout based on the device’s state. 

If the device is in prortrait mode, it loads the layout 
at / res /layout /main . xml. And if the device 
is in landscape mode, it loads the layout at / res/ 
layout- land/ main . xml. This doesn’t require 
any code changes to your Activity since both 
resources are still referenced by the same R constant 
at R . layout . main. 



ttev-e is the onCveateO 
method -fv-om Nasalotd- 
java. The R Constant i* 

setContentView is u^har^ed- 






public void onCreate (Bundle savedlnstanceState) { 
super . onCreate (savedlnstanceState) ; 
setContentView (R. layout .main) ; 
handler m new Handler (); 
ref reshFromFeed ( ) ; 



} 




Nasalotd.java 



It the device 
is ih portrait 
•'"ode, the 
regular layout 
'"'ll be loaded. 



main.xml 



The layout you just created starts 
out empty... time to huild it out! 



you are here ► 
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// 





Landscape Layout Magnets 



Since the portrait and landscape layouts are so similar, a good 
starting place is to copy and paste the layout. But some things will 
have to change too. Below is the copied beginning and end of the 
layout. Use the magnets below to complete the layout with the 
buttons on the top right of the screen. 



<?xml version="l . 0" encoding="utf-8 " ?> 

CLinearLayout xmlns : android="http : / / schemas . android. com/ apk/ res/android M 
android : or ient at ion=" vertical" 
android : layout_width=" f ill_parent" 

android: layout_height="f ill_parent M > TWis is the 'root 

UcavLa^oiAt. 



Wert ave some 

wa^cts- tteve ave 

some MORt- 







ma^ets. 


</LinearLayout> 


</LinearLayout> 


</LinearLayout> 








<Button android: text=' 


'@string/refresh" 




<LinearLayout 




android : onClick="onRef reshButtonClicked" 




android : or ien tation="hori zon tal " 


android : layout_width="wrap_content" 




android : layout_width="f ill_parent" 


android: layout heigh t="wrap_con tent" 




android : layout height="wrap_content" 


android: id="@+id/refreshButton" /> 




android : gravity=" 


H 

(D 

i-h 

rt 

V 









<LinearLayout 




<TextView 


android : orientation= M vertical M 




android: id="@+id/imageDate M 


android : lay out_width= M wrap_con tent" 




android : layout_width= M f ill_parent" 


android : layout_height= M wrap_content M 




android : layout_height= n wrap_content" 


android : gravity= M left" 




android: textSize="10dp” 


android: layout weigh t= n l n > 




android: layout marginBottom= M 5dp M /> 
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<Button android: text= M 0 string/ setwallpaper" 
android: onClick="onSetWallpaper" 
android : layout_width= M wrap_content M 
android : layout_height= M wrap_content M 
android : id=" 0+id/setWallpaperButton" > 



<TextView 



tfeve ave 

£V£H M0R£ 

magnets. 



android: id= M 0+id/ imageTi tie" 
android : layout_width= M f ill ^parent" 
android : layout_height=" wrap_content " 
android: textSize=" 2 Odp" 

android: textColor="0 color/ image_title_color M 
android: layout_marginTop="5dp" /> 



<LinearLayout 

android : orientation= M horizontal " 
android : lay out_width= M wrap_con tent" 
android : layout_height= M wrap_content M 
android : gravity= M center_vertical " 
android : layout_weight= M 0 " 
android : layout_marginTop=" 5dp" > 



The S^v*olH/iew 
2nd its Contents 
remain unchanged 



<ScrollView android: layout_width="f ill_parent" 

android : layout_height="wrap_content "android : layout_weight=" 1 
<LinearLayout android: orientation="vertical" 
android: layout_width=" f ill_parent" 
android : layout_height="wrap_content" 

\ android: gravity="center_horizontal" > 

<ImageView android: id="@+id/ imageDisplay" 
android: layout_width="wrap_content" 
android: layout_height= n wrap_content" 

) android: layout_marginBottom="5dp M 

I android : adj ustViewBounds="true" /> 

CTextView android: id="@+id/ imageDescription" 

I android: layout_width="wrap_content M 

android: layout_height= n wrap_content" /> 
</LinearLayout> 

</ ScrollView> 



M 



> 



</ Linear Layout> 
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Landscape Layout Magnet Solution 

Since the portrait and landscape layouts are so similar, a good 
starting place is to copy and paste the layout. But some things will 
have to change too. Below is the copied beginning and end of the 
layout. You should have used the magnets below to complete the 
layout with the buttons on the top right of the screen. 



<?xml version="l . 0" encoding="utf-8 " ?> 

CLinearLayout xmlns : android="http : //schemas . android. com/ apk/ res/android M 
android: or ientation=" vertical " 
android : layout_width=" f ill_parent" 
android: layout_height="f ill_parent M > 



CLinearLayout 

android : orienta tion="hor i zontal " 
android : layout_width="f ill ^parent" 
android : layout_height="wrap_content" 
android: gravity=" left" > 



This is a hovizx>K-fcal 
layout (or the 
entire header. 



CLinearLayout 

android : orientation= M vertical" 
android : layout_width="wrap_content" 
android : layout_height="wrap_content" 
android : gravi ty= " lef t " 
android : layou t_weight= "1" > 



Add the title 
ard date view 








Here is a vertical 
LinearLayout tor 
the title and date- 



CTextView 

android: id="@+id/imageTitle" 
android : layou t_width=" f ill_j?arent" 
android : layout_height=" wrap_content " 
android: textSize=" 2 Odp" 

android: textColor="0 color/ image_title_color" 
android: layou t_marginTop="5dp" /> 



CTextView 

android: id="@+id/imageDate" 
android : layout_width=" f ill_parent" 
android : layout_height="wrap_content" 
android: textSize="10dp M 
android: layout_marginBottom= M 5dp M /> 



C/LinearLayout> 
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<LinearLayout 



android: orientation= M horizontal" 
android : layout_width="wrap_content M 
android : layout_height= M wrap_content " 



W crt is a borizjontal 
L'mearLayout 

buttons on tbe vi^bt 



android : gravi ty=" center_ver tical " 
android : layout_weight=" 0 " 



android: layout_marginTop= M 5dp M > 



<Button android: text="0 string/ refresh" 

android : onClick="onRef reshButtonClicked" 



Add "the buttons 
L Le layout 




android : layout_width="wrap_content" 
android : layout_height="wrap_content" 
android: id="0+id/ ref reshButton" /> 



<Button android: text="0 string/ setwallpaper" 
android: onClick="onSetWallpaper" 



</LinearLayout> 

<ScrollView android: layout_width= M f ill_parent M 

android: layout_height="wrap_content "android : layout_weight=" 1 " > 



<LinearLayout android: orientation="vertical" 
android : layout_width=" f ill_parent" 



android: layout_height="wrap_content" 
android : gravity="center_horizontal " > 
<ImageView android: id="@+id/ image Display" 
android : layout_width="wrap_content" 
android : layout_height= M wrap_content M 
android: layout_marginBottom="5dp M 
android: adjustViewBounds="true" /> 
CTextView android : id=" @+id/ image Description" 
android: layout_width="wrap_content " 
android: layout_height="wrap_content" /> 



android : layout_width= M wrap_content M 
android : layout_height= M wrap_content " 
android: id= M 0+id/setWallpaperButton M > 



</ Linear Layout > 



</ScrollView> 
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Tqst Drove 



Update the layout in your project to match the code updates you 
did with the magnets. Now run the app again. The emulator 
will start off in portrait mode. Press CTRL — ► FI 2 to switch to 
Landscape mode and back. 



CTRL — ► F12 to 



NASA Dally Image 

GRAIL Heads to the Moon 




Fire and smoke light up a blue sky as a United 
Launch Alliance Delta II Heavy rocket propels 
NASA's Gravity Recovery and Interior Laboratory 
(GRAIL) mission into space. Liftoff from Space 
Launch Complex 1 7B on Cape Canaveral Air Force 
Station in Florida was at 9:08:52 EDT Sept.1 0. The 
spacecraft are embarking on a three-month 



nrn/to rpr>rH m 





CTRL — ► FI 2 to switch 
back to portrait 
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Yeah 



that 



huge 



^ improvement! 
hat will make your 
market. Plus, vou 



little 



details 



It 



cool 



the 



so 



app 



on 



know 



space! 



This was a cool improvement 
for landscape mode. 

That button bar looks great in portrait 
mode but sure was a huge waste of space 
in landscape mode. With those buttons 
moved to the top right, you can see almost 
all of the image, even with the minimal 
screen height. And with this change, 
portrait mode is left alone and just the 
landscape mode was altered. Super cool! 



tliereiare no 

Dumb Questions 



% I would have laid out this screen differently. Is this the 
only way to solve this button issue? 



% This landscape mode change is pretty minimal. Can I 
make bigger changes? 



There are many different ways to have solved this design 
issue. This is pretty common when you’re dealing with user 
interface design. 




What is another way you might have solved this? 



You’ll learn about Android menus in a few chapters. These 
are actions that are hidden until you press the menu button. Menus 
are often a good choice if you want to hide functionality but still 
allow it to be used. 



You can change the screen all around and have entirely 
different functionality! That said, you probably want to keep 
landscape mode and portrait mode pretty similar since they are the 
same screen from your users perspective and they might go back 
and forth as they move their phone around. Also, remember that 
the underlying Activity is the same for both landscape and portrait 
mode, so any features added to either orientation need to be 
supported by the same Activity. 



you are here ► 
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What about super small screen devices? 

Now that the landscape mode is taken care of it’s time to move on 
to small screen devices. But as with any other issue, the first step 
is always to replicate it in your local development environment. 

Testing landscape mode was easy! All you had to do was switch the 
orientation of the running emulator. But how do I make the emulator 
device smaller? 



Create an AVI? for a smaller screen device 

The whole point of creating an AVD (which as a quick refresher 
stands for Android Virtual Device) is to be able to run an Android 
emulator mimicking a hardware device. Switching between landscape 
and portrait mode worked on the same device, but making a smaller 
screen requires a new device. 

Making a new AVD is easy to do though. Go to Window — > Android 
SDK and AVD Manager. Select Virtual Devices and press “New...”. 



Name “the A\/P APII0- 
ZOO-Z^O (API vevsion 

number and screen siz*) 

Select API Level 10 . 




Se*t *tbe resolution *to 
ZOO % Z^O pi%els. 



O C) Create new Android Virtual Device (AVD) 
AFI10-300-350 

Android 2.3.3 - API Level 10 

ARM (armeabi) 



Snapshot: 



5 kin.: 




O Built-in: 



Default {WVCASOO} 



Resolution: 300 



Property 



Value 



Abstracted LCD density 240 

Max VM application heap si 24 
Device ram size 256 



Delete 



Q Override the existing AVD with the same name 



f Cancel ) ( _ Create AVD J 
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Launch your new AVP 

The AVD is just a description of a device. Before you 
can test your app on that AVD, you need to start it. 



A-Pter dreatin^ your new J\W, 
you II see it appear in the 
.Virtual Devides list- Seledt the 
new AVD -from the list- 



virtual devices 
Installed packages 
Available packaq 



The new J\VV is 

now running- 



Android 5Dft and AVD Manager 

List of existing Android Virtual Devices located at /Users/jonatliansinnon/.android/avd 



AVD Marne 



“V AF11O-300-35O 
v* standard 



TargV'harne 
Android 2 . 3.3 
Android 2.3.3 



Platform 
2.3.3 
2 3.3 



API Level 
10 
10 



CPU/ABI ^Pl 

ARM (armeabi) 

ARM (armeabi) 



WiLVi -the new hW 
selected, press slavt 



x illl ■ 4:19 





v' A valid Android Virtual Device. A repairable Android Virtual Device. 

X An Android Virtual Device that failed to load. Click 'Details' to see the error. 



55 54: API 10-3 00-350 
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Run the app on the small device 

Now that the new AVD is running you can run the app on it 
just like you would your original AVD. Run your project now 
and you’ll see it running on the smaller emulator. 



Wt>ct is the 

Daily _ 
Uage app 
\ruhhih0 ok the 
small device 
Cm ualtov-/ 



55 54: API 10-300-350 



Ie nil A 4:22 

NASA Daily Image 

GRAIL Heads to the 
Moon 

Sat, 10 Sep 2011 



Refresh , , Set W' 

Woah! That's not what 

the app looked like at all 
on the smaller phone 




You may have to 
select the emulator 
after trying to tun 
your app. 

Your Android development environment 
knows about the emulators you have 
running. And if you have more than one 
emulator running, it will ask you which 
emulator you want to install and run 
your app on. If you closed your original 
emulator before launching the new 
smaller device, you won’t see this. 




It looks really different! 

There are always going to be little differences between devices 
and emulators. But there shouldn’t be this drastic of a difference 
in display between them! Let’s get to the bottom of this... 



ril! > 2:22 1 



NASA Daily Image 



GRAIL Heads to the Moon 



Set Wallpaper 



This app 
looks -fco-tally 

di'P-Pcv'CK't cbcK 
"though its 
"the same siz^d 

s£\reCK. 



The answer lies with pixel density.. 
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There are two screen device properties that effect the way your 
application looks and runs on a device. 



Screens Tip C]aSe 



Ok 



Screen Size 

This refers to the number of horizontal 
and vertical pixels on a screen. 



300 pixels wide 

* * The hW 

you just 

dreated 



480 pixels wide 

< > 



350 

pixels 

high 



© 




Your -f irst 

m 

at the 

de-fault 

resolution 



Pixel Density 

This refers to the abstracted number 
of pixels in an inch. 

1 inch 




Super zoomed in view o( 
1*1 indh squares on the 
two sdreens. Pi*el dounts 
are NOT to sdale- 



Per inch, the small screen phone actually has 
twice as many pixels as the big screen. 



AT 



More pixels 
over here- 
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Edit the AVP's pixel density 

You can edit your the Pixel Density of the emulator you just 
configured. Go the Window — > Android SDK and AVD 
Manager and select your new AVD. Click edit and you’ll 
see the same dialog that created your AVD. 

Under Hardware, there is a property called Abstracted 
LCD density. This controls the pixel density of your AVD. 



Here s the pi*el • 
density hardware 
property- 



Edit Android Virtual Device (AVD) 



Name: 
Target: 
CPU/ABI: 
5 D Card: 



Snapshot: 



Skin: 



API 10- 3 00-3 50 



Android 2.3.3 - API Level 10 



ARM iarmeabi) 



0 Size: 512 
O File: 

0 Enabled 



0 Built-in: 



Default (WVGAS00) 



0 Resolution: 300 



-> 



Property Value 

Abstracted LCD density 160 

Max VM application heap si 24 
Device ram size 2S6 



I Delete 



□ Override the existing AVD with the same name 



Clidk on the value 
to edit- Set the 
value to \l>0. 



: Cancel ; ( Edit AVD j 



Watch it! 



Be sure to use a supported pixel density. 

The Abstract LCD Density can only be set to 120, 160, 
240, 213, or 320. If you edit your pixel density, you must 
set it to one of these values. 
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(Re)start the A VP and the app 

Now that you’ve edited the AVD, close and 
restart it to make the changes take effect. 

Once you start the updated AVD, run the 
app again and see how it looks. 






55 54: API10-3 00-350 



a * n 4:32 



NASA Daily Image 



GRAIL Heads to the Moon 

Sat 10 Sep 2011 




* 



Refresh Set Wallpaper 



Vow the app looks 
ri g kt on the small 
screen emulator! 



OK dude, so does this 
mean you're finally 
going to look at my 
small screen layout? 



. RAM 



What updates would you make to the layout design 
for small screens? 
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Update the design for small screens 

Now that you can see what the small screen 
layout looks like, you can also see that you 
can’t make the same change you did for the 
landscape layout. Even though they both 
want to get rid of the buttons, the small 
screen doesn’t have room for the buttons 
next to the title and date. 




What about just making 
the buttons scroll with the 
picture and the description 
just for small screens? 



\ 
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Scrolling the buttons is a great idea! 

You could relatively make a minor change to the 
layout, just for small screens, allowing the buttons 
to scroll on the screen after scrolling past the image 
and the description. This is a bit of the best-of-both- 
worlds as your regular screen sizes will still have the 
buttons on screen, and just the small screens will 
have to scroll. But at least they’ll see more of the 
image like the landscape layout. 



Time to make a new layout. 



multiple device support 



Create a small screen only layout 

Just like you created a landscape specific layout, you can 
create a small screen specific layout. Open the new Android 
XML File Wizard and create a new layout XML file as you 
did before. But this time, add the size by selecting size from 
the Available Qualifiers. Once added, select screen size 
“Small” from the dropdown on the right. 



Select si z* 
*Cvota 

Available 

^uali-Piev-s. 



^ 'O New Android XML File 


New Android XML File 

Creates a new Android XML file. 


© 




Project CHO 5_NASA_I mage_of_the_Day 


( Browse... ) 



File activity_main.xml 

What type of resource would you like to create? 

© Layout O Values 

O Color List O Animator 

O Preference O Searchable 

What type of resource configuration would you like? 



O Drawable 
O Animation 



O Menu 

O AppWidget Provider 






Available Qualifiers 
^Country Code 
(ID Network Code 
!□ Language 
vj* Region 

Smallest Screen Width 
Screen Width 
Screen Height 





Folder /res/layout-small 

Select the root element for the XML file: 

' LinearLayout 



Once added, select 
small tv Ota the 
dropdown to 
indicate a small 
screen size- 



When you click 
Finish, a new layout 
xml file will be 
created in the layout- 
small directory for 
small screen phones. 





main.xml main.xml main.xml 
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Small Screen Layout Magnets 

Below are the magnets you need to complete the custom small 
screen layout. Just like the landscape mode, the small screen layout 
with the buttons in the ScrollView is going to be really similar to 
the original layout. You just need to recreate the button bar inside the 
ScrollView. Use the magnets below to complete the layout. 



Your majnC'ts. 



<Button android: text="0string/setwallpaper" 
android : onClick="onSetWallpaper " 
android : layout_width="wrap_content" 
android : layout_height="wrap_content" 
android: id="0+id/setWallpaperButton" /> 



</LinearLayou t> 



<TextView 

android: id="0+id/imageTitle" 
android : layout_width="f ill^parent" 
android : layout_height="wrap_content" 
android: textSize="20dp" 

android: textColor="0color/image_title color" 
android : layout_marginTop="5dp" 
android : layout_marginBottom="5dp" /> 

CImageView 

| android: id="0+id/imageDi splay" 

| android: layout_width="fill_parent" 

| android: layout_height="wrap_content 

android : layout_marginBottom="5dp" 

| android: ad jus tViewBounds=" true" /> 




<ScrollView 

android: layout_width="fillj?arent" 
android : layout_height="wrap_content" 



android : layout_weight=" 1 " > 
<LinearLayout 

android : orientation= M vertical " 
android : layout_width= M f ill_j>arent M 
android : layout_height= M wrap_content M 
android: gravity= M center_horizontal M > 
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Move 

ma^ets. 



<?xml version="1.0" encoding="utf-8"?> 

<LinearLayout xmlns : android="http : //schemas . android.com/apk/res/android” 
android : orientation=" vertical ” 
android : layout_width=" f ill_parent" 
android: layout_height= M fillj?arent" > 



[ </LinearLayout> j 
</LinearLayout> j 



<TextView 

android: id="@+id/ imageDescription" 
android : layout_width="f ill_parent" 
android: layout_height="wrap_content" /> 

<Button android: text="0 string/ refresh" 

android : onClick="onRef reshButtonClicked" 
android : layout_width="wrap_content" 
android : layout_height="wrap_content" 
android: id="0+id/ ref reshButton" /> 



I </Scro llvi ew> 

<LinearLayout 

android : orientation="horizontal" 

android : layout_width="f ill_parent" 

android : layout_height="wrap_content" 

android : layout_weight="0 " 

android : paddingTop="5dp" 

android : gravi ty=" center_hor i zontal " 

android : background="#f f 8D8D8D" > 
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Small Screen Layout Magnet Solution 

Below are the magnets you needed to complete the custom small screen 
layout. Below are the magnets you need to complete the custom small 
screen layout. Just like the landscape mode, the small screen layout with 
the buttons in the ScrollView is going to be really similar to the original 
layout. You just need to recreate the button bar inside the ScrollView. 
Use the magnets below to complete the layout. You should have used the 
magnets below to complete the layout. 



<?xml version="l . 0 M encoding= M utf-8 M ?> 

CLinearLayout xmlns : android= M http : //schemas . android. com/ apk/ res /android” 
android : orientation= M vertical " 
android: layout_width="fill_parent" 
android: layout_height="fillj?arent" > 

<ScrollView 

android : layout_width="f ill^parent" 
android : layout__height="wrap_content" 
android : layout__weight=" 1 " > 

<LinearLayout 

android : orientation= M vertical " 
android : layout_width=" f ill ^parent" 
android : layout_height=" wrap_content " 
android: gravity="center_horizontal" > 

<TextView 

android: id="0+id/imageTi tie" 
android : layout_width="f illjparent" 
android : layout_height="wrap_content" 
android: textSize="20dp" 

android: textColor="0color/image_title_color" 
android : layout_marginTop="5dp" 
android: layout_marginBottom="5dp" /> 
CTextView 

android: id="0+id/imageDate" 
android : layout_width="f illjparent" 
android : layout_height="wrap_content" 
android: textSize="10dp" 
android: layout_marginBottom="5dp" /> 



ttev-e av-e *thc title 
and date Te*t\/iews 
as ehildven to the 
Sdv-olMev/s vev-tieal 
Lineav-Layout* 



l/ev-tieal 
Lineav-Layout 
as the single 
Sdvoll\/ie>w ehild- 



Beginning ot 
the Sevoll\/iew. 



The voot 

vertical 

LineavLayout 
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Heve av-e -the irway 
and description 
Views, also as 
children t o the 
SerollView^s vertical 
LinearLayout- 



This is the start 
o-f the button 

panel directly mime 
as a child o£ the 
ScrollViews vertical 
LinearLayoutchild 



Inside the button 
Li near Layout is 
the sdme, both 
the refresh and 
set wallpaper 
button are added 
to the horizontal 
LinearLayout- 



<ImageView 

android : 
android: 
android : 
android : 
android : 



id="@+id/ imageDi splay" 
layout_width="f ill_parent" 
layout_height="wrap_content" 
layout_marginBottom="5dp" 
ad j u s tVi ewBounds = " t r ue " / > 



<TextView 

android 
android : 
android : 



id="@+id/ imageDescription" 
layout_width="fill_j5arent" 

1 ay ou t_he i gh t= " wr ap_con tent" / > 



<LinearLayout 

android : 
android: 
android: 
android: 
android : 
android: 
android : 



or ien tation="hori zon tal " 

layout_width="fillj?arent" 

layout_height="wrap_content" 

layout_weight=" 0 " 

paddingTop="5dp" 

gravity="center_horizontal" 

background="#ff8D8D8D" > 



<Button android: text="@ string/refresh" 

android : onClick="onRef reshButtonClicked" 
android : layout_width="wrap_content" 
android : layout__height="wrap content" 
android : id="@+id/ ref reshButton" /> 



<Button android: text="0string/setwallpaper" 
android : onClick="onSetWallpaper " 
android : layout_width="wrap_content" 
android : layout_height="wrap_content" 
android: id="@+id/setWallpaperButton" /> 







</LinearLayout> J 




</LinearLayout> 


l 


</ScrollView> 





</LinearLayout> 
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testing out the small screen layout 




Tost Drii/q 



Now that you have the layout customized for small screens, run the 
app and make sure your layout changes worked. 



n 



5554:API1G-30Q-350 



* it * 8:14 



NASA Daily Image 



New Supernova Remnant Lights 
Up 



Mon, 12 Sep 2011 



f%) 

-J W 



/ 



No buttons on 

s-tavtuf. 



Men tbe app s-tavs up, 
*tbe buttons ave bidden, 
bu*t you dan now see 
*tbe entire ima^el 



\M / / 

1 Sci'oW' ' 
1 / « \ 



Men you sdroll ALL 
ibe way down, youll see 
"tbe -full button bar. 
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NASA Daily Image 

astronomers to study it in detail as it evolves. 
Now, the supernova debris, which has faded 
over the years, is brightening. This means that 
a different power source has begun to light 
the debris. The debris of SN 1987A is 
beginning to impact the surrounding ring, 
creating powerful shock waves that generate X- 
rays observed with NASA's Chandra X-ray 
Observatory. Those X-rays are illuminating the 
supernova debris and shock heating is making 
it glow in visible tight. Since its launch in 1 990, 
the Hubble telescope has provided a 
continuous record of the changes In SN 1 987A, 
Image Credit: NASA, ESA, and P. Challis 
(Harvard-Smithsonian Center for Astrophysics) 




The small screen updates look great! 
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What about small screen landscape mode? 

You’ve put a lot of effort now into customizing the 
app for landscape mode, and small screens. All of this 
because you really want to make the app the best on all 
of these different devices! But so far, the issues you knew 
about were raised by your users. But it’s your job as the 
Android expert to think ahead for your users and 
anticipate these layout changes. 

With that in mind, take a closer look at the small screen 
device again. You customized the main layout, the 
landscape layout and the small screen layout. 

Put what about small screen landscape mode? 

Turn the emulator into landscape mode (by pressing 
CTRL-F12) and see how it looks. 



5554:APILG-3G0-35O 



* ml ■ 8:09 



.1 
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New Supernova Remnant Lights Up 



Mon, 12 Sep 2011 
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the supernova debris, which has faded over the years. 
Is brightening. This means that a different power 
source has begun to light the debris. The debris of SN 
19S7A Is beginning to Impact the surrounding ring, 
creating powerful shock waves that generate X-rays 
observed with NASA's Chandra X-ray Observatory. 
Those X-rays are illuminating the supernova debris 
and shock heating is making it glow In visible light. 
Since Its launch In 1990, the Hubble telescope has 
provided a continuous record of the changes in SN 
1987A. Image Credit: NASA, ESA, and P. Challis 
(Harvard-Smithsonian Center for Astrophysics) 



Refresh Set Wallpaper 



m. 1 



Wait, how did it figure out the 
landscape small screen layout? 
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determining the best layout 



How Android determines the best layout 

As you’re building and customizing your app for 
multiple screen sizes and configurations, you can end 
up with a lot of different layouts in your project. It’s 
important to understand which is getting loaded and 
why Here’s a look at how the four layouts scenarios 
have loaded their layouts. 



A normal device is in portrait mode. 




© A normal device is in landscape mode. 



Big screen in 
i/' landscape mode 




Is the device in 
portrait mode? 



The layout under 
layout-land will 
get loaded- 




Is there a custom layout 

for this screen size? j^|0 

Is there a custom layout 
for this landscape? 



main.xml 
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Q A small device is in portrait mode. 

— Small screen i n 

I / portrait mode 



R. layout, j 1 
main / 



W 



Is the device in 
portrait mode? 



The layout under 
layout— small v/*ll 
jet loaded- 




r — i 

I layout- I 

| small l 



Is there a custom layout 
for this screen size? 



Yes 
Yes 



main. xml 



o 



A small device is in landscape mode. 



I R. layout. | 
I main / 




Small device in 
l/* landscape mode 




The layout under 
layout— small will 
jet loaded- 




Is the device in 
portrait mode? 



No 



Is there a custom layout 
for this screen size? 




Is there a custom layout 
for this landscape? 



No 







main.xml 




GeeJcBits 

Check the online docs at http://developer.android.com/ 
guide/practices/screens_support.html for more detailed 
information on how layouts are selected for other screen 
sizes not covered here. 
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changing the home icon 



Shawn's happy with the app now 

Shawn can see the entire space picture 
without scrolling (which he’s thrilled 
about). And if he wants to see the 
description, refresh the app or set my 
wallpaper, he can always scroll down. You 
just made a happy user! 




Awesome! The app looks 
way better on my small 
phone. You even thought 
about landscape mode! 





200 



Chapter 5 



multiple device support 



Now, about that icon... 



Remember, Shawn did point out one other item that should 
be fixed before posting the app on the Android Market. He 
mentioned the app icon was the default icon and it would be 
a good idea to change it. It will definitely make the app more 
polished looking to your users, so let’s do that now. 

After some looking around on the web, you found some free 
pictures of earth. One in particular looked great for the home 
screen icon. 

As you saw in Chapter 3, app images are stored in the res 
directory. And the home screen icon is in there in a PNG 
called icon. png. 



You -found “this ima^e on 
the web and want “to 
use it as the app idon. 





Ummm, no. How can 
three separate images 
control one app icon? 
That's crazy! 



There are multiple images just like there 
are multiple layouts. 

You have to build different layouts to optimize for different 
screens. And you have to include different images too. Let’s 
see what the different images are optimized for... 



n— I n 

drawable- I 1 PNG I 

^ 1 I— 1 

icon. png 




The idon.pn^ ima$e undev 
these div-eetovies av-e used as 
the home sdveen app i£on. 



icon. png 
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different image for each pixel density 



(Afferent images for different pixel densities 

Earlier in this chapter, the first small screen AVD 
you created looked weird because the pixel density 
was wrong. Buttons and images were too big and 
everything looked really squished on the screen. The 
same weird appearance problems would happen if you 
use an image that’s too big or too small for a device’s 
pixel density. 

Android solves this problem by breaking devices down 
into groups of pixel densities (high, medium, and large) 
and allows you to include images for each group. Then 
just like the layouts getting chosen at runtime, image 
resources are dynamically loaded based on the screen 
size the app is running on. 



Android devices are broken ...which map to the separate folders 

down into these groups... under the res directory with images 
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This way, once the images are 
displayed on the device, they are 
all about the same size. 



Real size is the whole reason for the 
pixel density groupings. 

If you have a screen with a pixel density of 240 DPI 
and an icon that is 240 pixels wide, it’s going to be 

one inch wide rendered on the screen. And if you 
have a 1 20 DPI screen with a 120 pixel wide image, 
it’s also going to be one inch wide rendered on the 
screen. 

Let’s say for example that you only had the large 240 
pixel width icon. If you displayed that on the 120 
DPI screen, it would render 2 inches wide! Twice 
as big as the large screen. 




That’s why the first AVD that you created had suck big 
buttons and icons, when the pixel density was wrong. 



* 



Larger icon for high 
resolution phones 



Small icon for low 
resolution phones J 



Medium sized 
icon for medium 
resolution phones 
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Image standards 

As you’re quickly learning, with all of the different 
devices, there are lots of variations in screen sized 
and pixel densities. Android divides these up into 
manageable groups to make things easier. But that’s 
not enough to make a consistent look and feel. 

To solve this problem, Android has a published set 
of guidelines that encourage standards. One of these 
standards is the image size of the home screen icon. 




Visit http : / /developer . 
android. com/guide/ 
practices/ui_guide lines/ 
index . html and familiarize yourself 
with the Android UI design guidelines. 



The guidelines define pixel dimensions for launcher icons at each pixel density. 



' 

Low 



36x36 pixels 



— ■ — 1 




1 


Medium 




High 





1 





48x48 pixels 



72x72 pixels 



tJiereiare no 

Dumb Questions 




Are there any other design requirements for the icons? 



I The icon design guidelines list a number of other design 
attributes to use for your home icons. These include recommended 
margins, colors, drop shadows, and more. 



% Wow, that sounds like a lot of different requirements. 
Are there some examples? 



Absolutely. The icon design guidelines page includes a 
number of different example icons you can use for reference. 



The design requirements for these icons look really 
complicated! Is it worth it to seek a professional designer’s 
help? 

Yes. Apps are becoming much more graphics intensive 
and can often benefit form the help of a professional designer. 
This is especially true of your launcher icon which will be one 
of the first things your users see! If you work with a designer, 
point them over to the UI guidelines page as well as http : / / 
developer . android . com/ guide /practices/ 
ui_guide lines/ icon_design . html # design - 
tips for more information on working with graphics in Android. 
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Home Icon Magnets 

Below are the density specific folders under the res directory. There 
are magnets for the picture of earth icon resized for each pixel 
density. Drag the home icons on the squares to the right of the 
folder they belong to. 




Dva^ the 
appropriate 
home street 
idon to eadh 
density spedi-Cid 
diredtory. 
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Home Icon Magnet Solution 

Below are the density specific folders under the res directory. There 
are magnets for the picture of earth icon resized for each pixel 
density. You should have dragged the home icons on the squares to 
the right of the folder they belong to. 




This 7Zx7Z pixel i don is 

tor the hijh resolution 
devices and joes in the 
hdpi directory. 



This ^x^t# pixel 
idon is -for the medium 
resolution devices 
and Joes in the mdpi 
directory. 



This p l>cc | idon is 

tor the low resolution 
devices and joes in the 
Idpi directory. 
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Tqst Drii/g 



Now that you have optimized icons for each pixel density, run the app in both AVDs and navigate to the home 
screen. Note the updated icons. 



Clock 


Contact' 


t* 

3G 

i Custom 


■III 1 2:34 1 

Dev Tools 


i 




Locale 


£ 


Downloads 


Email 


Gallery 




O 


Q 


j 


v^uilder 

m* 


Messaging 


Music 


NASA Daily 


NASA Daily 


c 




Image 


Image 

& 


Phone 


Search 


Settings 


Spare Parts 


Speech 

Recorder 


# 





0y\ -the large sdreen high 
pi*el density device, -the 
7Zx7Z i£on is used- But 

still* it just looks normal- 





a Mil i 


ft 2 39 ■ 


Downloads 


Email Gallery Gestures 

Builder 


v: - 






Messaging 


Music NASA Daily 1 

Image 


Phone 


•v 


• X 4 - 4 


■ 


Search 


Settings Spare Parts Speech 
Recorder 




# 





On the small sdreen 
medium pixel density 
devide, the ^8x^0 
idon is used- But 
again, it just looks 
normal- 



Two screen sizes, two pixel densities and different image to 
make the images look appropriate on each. Perfection! 
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getting more feedback 





This is looking great. I 
think it's finally ready 
for the market! 



It looks like the app is ready 
for the market 




After building the app, tweaking the 
layouts for screen sizes and orientations, 
and polishing it off with the home icons, 
it’s ready for people to download and run 
in from the Market. . 
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G# Off Piste 

You’ve done some great work optimizing your layouts for different devices. Here are 
some additional directions to explore if you’re looking for more! 



Cover more tolerations 

? ' Lll yhones large phone- 

and o layouts {or medium 

Add an additional set or 107 

screen sized phones- 



Reav-va^e i\\t Strew (or 
ovic^'ta'tio^ thanes 



Make more hVDs 

/ou Currently have one AW tor large 
screens and one tor small. Try Creating 
a tew more so you can test your small 
and large layouts against multiple 
d'+terent sized Al/Ds. Watch your 
layout managers dynamically reside 
based on screen size/ 



You made a small change between orientations, 
moving the buttons to a better location- But 
think ot some extreme changes you Could make 
that would benefit orientation differences- 
Think about adding teatures or drastic layout 
differences between orientations. Think about 
how this will effect the user experience- |s it 
benef icial or a distraction? Also, think about how 
the Activity might need to change if you have 
functionality in one orientation but not another. 
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Your Screen Toolbox 

Now that you’ve optimized your 
app for different screen sizes, 
orientations and densities, you 
make all your apps look great 
across multiple Android devices! 



„ small Street are at least 4-ZMp*3ZOdp 
, normal sereens are at least W ZOd ? 
9 lar^e screens are at least 4*Odp*Wdp 

„lar 5 e screens are at least ^Od ? ^ZOd ? 



*•* dp is denistY independent pixels 







■ Create multiple AVDs for different screen 
sizes. 

■ Change emulator orientation by pressing 
CTRL FI 2. 

■ Create landscape layouts using the New 
Android XML file wizard and adding the 
landscape qualifier. 

■ Create small, normal, and large screen 
layouts using the New Android XML file 
wizard and adding the landscape qualifier. 

■ You can combine qualifiers and make 
layouts just for one size and orientation, like 
small and landscape. 

■ Adjust the pixel density as you create new 
AVDs to test the correct resource loading. 

■ Create custom resources for each pixel 
density you support. 

■ You can edit AVDs after you create them to 
adjust screen size and pixel density. But it’s 
still a good idea to have a few AVDs created 
with configurations for testing. 

■ Replace icon.png with a custom icon for 
your app, noting the specific icon sizes for 
each pixel density. 
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6 tablets 

Running your apps on + 

, big(ger) screens 





That may actually be 
the cheesiest thing 
I've ever heard. 



That guy is off on his own. 
What he doesn't get is that 
the whole band working 
together is way cooler than 
him by himself! 



There are more than just phones in the world of Android 

devices. In the last chapter, you learned how to customize layouts to target different 
phone screen sizes and device orientations. But now you want to take advantage of some 
of the other Android devices out there like tablets. Some of the same strategies still apply, 
like creating base layouts and optimizing for screen sizes and orientations, but you’ll learn 
about new features to support tablets. You’ll also learn about a cool new feature called 
fragments that allow you to configure, and reconfigure the content on the screen based 
on screen size. Let’s get going!. 
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Bobby wants to run the NASA app on a tablet 

Bobby’s school is running an experiment and 
gave everyone in his class an Android tablet. 

Naturally, the first thing Bobby wanted to do 
was check and see how his NASA Image of 
the Day app looks on his brand new tablet! 




Install the app on a tablet. 

The app is already up on the market, so 
you can download it from any device... 
including a tablet! You can also install the 
app directly on the tablet just like a phone. 



Let’s see how it looks... 
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The app doesn't look so good 



The title is really small on this huge screen, the image is 
centered with too much blank space, and the text goes 
all the way across the screen. It looks bad because we 
are running a layout that was designed for a phone and 
running it straight on a tablet. 




The iiilc is 
"too sr»al|. 



Thev-e is a very lav-je 
amount o-P bla»k spade- 



The app loaded -tbe 
landscape layout s\ue 
-this is in landscape w'ode- 



NASA Daily Image 

Expedition 28 Lands 

Fri, 16 Sep 2011 



e Soyuz TMA-21 spacecraft Is seen as It lands with Expedition 28 Commander Andrey Borisenko, and Flight Engineers Ron Garan. and Alexander Samokutyaev In a remote area outside of the town of 
ezkazgan, Kazakhstan, on Friday, Sept. 16, 2011. NASA Astronaut Garan, Russian Cosmonauts Borisenko and Samokutyaev are returning from more than five months onboard the International Space 
ition where they served as members of the Expedition 27 and 28 crews. Photo Credit: (NASA/Bill Ingalls) 



i | i H-H 






Android tablet users describe apps 
like tbis as being bumongified! 

Since they act like they 
ave VUWrtinJ hurmOY^OUS 
pbones! 



Really wide 
s-breiehed text... 
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adding more content 



What about all that blank space? 

Right now, the app has a lot of blank space 
when it runs on a tablet. Bobby’s teacher, 

Kevin, has an idea for you. 




r 

Bobby's 
-teathe*- &vm. 



Why don't you fill up some of 
that free space by displaying 
NASA educational news? 



Adding a second feed sounds like a 
great way to fill out the app! 

Since the school gave out tablets, all of Bobby’s 
classmates have them now. And they all want 
to run the NASA Daily Image app. While they 
are looking at the daily image, a NASA feed 
displaying information specifically oriented 
around education sounds like a perfect fit. So 
you’re not just adding stuff to fill out the screen, 
you’re going to be adding additional useful 
content for your tablet users. 
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The NASA education news feed activity 

Kevin thinks this is such a good idea that he 
built the Activity for you to display the NASA 
Educational News feed. 



Download the sample code for Chapter 6. There 
is a project called CHO 6_NASA_Image_ 
of_the_Day that includes a new Activity for 
displaying the NASA Education News feed in 
NasaEdNews . j ava. 



You’ll be taking this code and the code you’ve 
written in earlier chapters to make these two 
Activities work together for a tablet app. 



r 



+ 



Do this! 



Download the sample projects i fyou 
haven't already. Open the project 
CH06_NASAJmage_of_the_Day 
and you'll find a new Activity called 
NasaEdNews and all of the feed 
parsing code to make it work. 



A* activity displaying the 
NASA education new teed- 



NASA Participates In Space Farm 7 
Mission At The Rock Ranch, Ga. 

Educators from NASA's Kennedy Space Center, Fla., 
will travel to The Rock Ranch, Ga., on Sept. 24 to 
participate in the ranch's annual family fun day kick- 
off event. 

h ttp://www. nasa.sov/cen ters/kennedv/n e ws/ 
releases/201 l/release-201 10916.html 

NASA Seeks Undergraduates To Fly 
Research In Microgravity 

NASA is offering undergraduate students the 
opportunity to test an experiment in microgravity as 
part of the agency's Reduced Gravity Education Flight 
Program. 

http://www.nasa.sov/home/hQnews/20 1 1/sep/ 

HO 11-297 Reduced Gravity Flishts.html 

NASA Offers Shuttle Tiles And Space 
Food To Schools And Universities 

NASA is offering space shuttle heat shield tiles and 
dehydrated astronaut food to eligible schools and 
universities. 

http://www.nasa.sov/home/hanews/20 1 1/sep/ 

HO 11-296 Shuttle Tiles Space Food.html 

NASA Family Education Night Set For 

^pnt 10 



o 

O 

You’ll learn all about 
lists in the next chapter 

The NASA Education News 
Activity is displaying each 
result in a special View called a ListView. 
You’ll learn all about them and how to build 
and customize your own in the next chapter. 
For this chapter, you can use the sample code 
you’ve downloaded. 
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designing for the big screen 



How do you want the app to look? 



There are a number of different ways to 
design the app to include both the daily image 
and educational news. Here is one design that 
uses space well, and also keeps the news off to 
the side as secondary information. 



The design "the image 
of -the day section is 
mos-tly unchanged- 



The design of *the news 
lis*t also remains vasieally 
unchanged, jus-t a vertical 

|is*t of hews rtems. 









Pidfuve fi-tle 


Re-fresh 


Set l/Vallpaper 


Pidture Date 
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The plan 

There are a number of different ways to 
design the app to include both the daily image 
and educational news. Here is one design that 
uses space well, and also keeps the news off to 
the side as secondary information. 



1. Update your development environment 

Android tablets are running Android version 3.0 
and above. In order to be able to develop tablet 
specific Android functionality, you’ll need to update 
your development environment to use an Android 
platform 3.0 or above. 




Install new 
Android platform. 




t Combine the activities 

The code for the Nasa Image of the Day and the 
Education News feed are in two different Activities. 
These need to be combined into a single Activity to 
they can be displayed on the screen. 



Display two activities 
on one sdreen. 









News 


+ 


Image 









3. Test the new combined activity 

You’re going to be moving a lot of code around to 
make both Activities display on the screen together. 
As always, you’ll need to test your code and make 
sure nothing is broken (and fix it if it is)! 
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Add a new platform 



In Chapter 1, you installed all of the Android development tools, 
including the base SDK and one version of the Android platform 
(Android 2.3.3, API Version 10). Tablets use a later version of 
Android starting with Android version 3.2 (API version 13). 



Android is built to handle these differences by allowing you to install 
multiple platforms at once in your development environment. To 
work with Tablet specific functionality, start by installing Android 3.0. 
Launch the Android SDK and AVD Manager select Available 
Packages , and install Android 3.2. 



Android and 

A\/P Manager 



Select Available 
Packages. 



Select Android 
version 32~ 



rs n ^ 



Android SDK and AVD Manager 



Virtual devices 
Installed packages 

Available packages 



SDK Location: /Users/jonathansimon/android-sdk-mac_x86/ 



Packages available for download 






▼ 25- Android Repository 

► [f] Documentation for Android SDK, API 13, revision 1 

► 'p SDK Platform Android 3.2, API 13, revision 1 

► SDK Platform Android 3.1, API 12, revision 3 

► SDK Platform Android 2.3.3, API 10, revision 2 

► SDK Platform Android 2.2, API 8, revision 3 

► 'p 1 SDK Platform Android 2.1, API 7, revision 3 

► (2) Samples for SDK API 13, revision 1 

► Samples for SDK API 12, revision 1 

► Android Compatibility package, revision 3 
► Ts Third party Add-ons 



D — 



Android SDK Platform 3.2, revision 1 



( Add Add-on Site.T) Delete Add-on Site.. (^Display ( Refresh ( Install Selected " 



Press Ins-tall 

Selected when 



Complete- 



there j are no 

Dumb Questions 



O: 



How come Android versions have a version number and 
an API number? 



O: How come there are separate versions for Android and 
Google platforms for each release? 



-^1 Since your app will be running on multiple Android versions 
simultaneously, the Android platforms are very specific about API 
changes. And the version number isn’t enough to let you know 
what version the API is. For example, 2.3 is API version 9, 2.3.3 
is API version 10, and 3.0 is API version 11. Since the numbering 
jumped from 2.3.3 to 3.0, the API version helps keep versions in 
sequence. 



The base Android platform versions include the core Android 
platform. Google provides an extended version of each platform 
with additional APIs including maps and other cool add ons. 
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Setup a tablet A VP 

Now that you have a new Android platform version 
installed, you need to setup an Android Virtual 
Device (AVD) that uses it. Then when you launch 
that AVD, you’ll be running an emulator with the 
latest version. And in this case, we’ll want to setup 
tablet dimensions since we’re testing tablets. 



Name the MV 

some-bhinj -bbai will 
lie Ip you remember 
which one i”b it Using a 
Combination o£ version 
and size will help you 
quickly -tell your MVs 
apart 




Create new Android Virtual Device (AVD) 

API 13 -Tab let 
Android 3.2 - API Level 13 






ARM (armeabi) 



Snapshot' 



Skin: 



Hardware: 



© Size: 

O File: 

Enabled 



0 Built-in: Default fWXGA} 

O Resolution: 



MiG 



Browse. „ 



Property Value 


New„.. 


Abstracted LCD density 160 

Keyboard lid support no 

Max VM application heap si 48 
Device ram size 256 


Delete 



! Override the existing AVD with the same name 



( f Cancel ; ( Create AVD J 



J 



Select *bbe 

^ plat-form you 
jus-b ins-baled- 



Select tbe 
de-faul-b size, 



Press Crea-be MV 
when youVe done- 



you are here ► 
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Start the tablet AVP 



Once your new tablet AVD is setup, start the 
AVD by going to Android SDK and AVD 
Manager — > Virtual Devices and launching the 
new API 1 3-Tablet device. 

You’ll notice it looks a lot different from Android 

2 . 3 . 3 . 



This is -the new 
home seveen. 



This -takes y ou to a || 
the apps installed on 
the device. 




These three buttons are the badk button, the 
home screen button, and the menu button 
respectfully- They have been moved to soft 
buttons for tablets- 



Now let’s run the app on the tablet AVD 
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Run the app on the tablet A VP 

Now that the tablet AVD is running, you can 
run your app on that AVD as you normally 
would (using the play button or right clicking on 

the app in Eclipse and selecting run). The app is running in 

■the emula^tor. 





Android will check where you want to run your app. 



If you have both Android 
emulators running and 
you run your app, you’ll 
be shown a dialog with 
the available devices. You 
can then choose where you 
want to run the app from 
the list of devices. 



l-f you have rwul-tiple A\/Ds running or 
devices £onne£-ted, youll gei a dialog 
like -this when you run your app. 




you are here ► 
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Combine the activities 

Now that you have the app running in 
the tablet specific emulator, it’s time to 
start implementing the design changes to 
combine the activities on one screen. 




One combined activity 

One way to make this work would be to combine both 
the Image of the Day and the Education News Feed 
Activities into one single combined Activity. There 
are a few big downsides to this. 

First, you would be duplicating code since you want to 
be able to keep the Activities separate to run just one at 
a time on a small screen device. On top of that, right 
now the code for each function (the image and the news 
feed) is encapsulated in an Activity. And it would be 
great to keep them that way. 



You could make one combined 
Activity to display both 
Activities on one screen... 
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Wouldn't it be dreamy if you could 
combine multiple Activities in a single screen 
without having to combine them into one giant 
Activity. But I know it's just a fantasy... 



you are here ► 
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Use fragments 



It’s a natural progression to add more features per 
screen once you move to the larger screen sizes of 
tablets. But since Android devices take on so many 
different shapes and sizes , it’s important to remain 
flexible and be able to arbitrarily combine parts 
of different screens. 

But it’s equally important that the functionality 

for the screen part stay tightly coupled to the 
screen part that is rendered. 

To solve these needs, Android introduced the idea 

of screen fragments. 



Oh a tablet... 

Users will see both fragments on a single 
screen. And the logic to drive each screen 
art is in a separate fragment. 
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... but the codebase is built on activities 

Fragments sound like a great idea, but right now your 
codebase is built on Activities, not fragments. Without 
rewriting your app from from scracth, you need to convert 
those Activities to fragments. How are you going to do it? 



You have two Activities... 



1 

Image of 
the Day 
> 




Activities. 



~ ' —1 

Education 

News 

jl-^. ■ 



you want to fragments and a Screen. 




display the 
•fra^e^ts. 



Converting your existing app to use fragments 

Here are the steps you’ll take to convert your existing 
app to use fragments without rewriting it from scratch. 



© 

© 

© 

© 



Convert your existing Activities to fragments. 

This will allow you to combine them into a single screen. 

Create a new Activity that will display the two fragments. 
Add the two fragments to the new Activity. 

Test and bug fix as needed. 



you are here ► 
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Extend fragment instead of activity 



Start by opening the NASA Image of 
the Day Activity (inNasalotd.j ava). 
Change the class declaration from extending 
Activity to extending Fragment. 



instead of activity. 



£T] Nasalotd.java S3 \ ^ 

package com . headf i rstlabs . ch05 . nasa . io 

©import java . io . IOException ;Q 

3a public class Nasalotd extends fjr.flfllDfi&t implements IotdHandlerListener { 
private final static String TAG - Nasalotd.class.getNameO; 

private static final String URL - " http ://www. nasa.gov/rss/image_of_the_day . rss" 

private Handler handler; 
private ProgressDialog dialog; 
private Bitmap image; 



public void onCreate(Bundle savedlnstanceState) { 

J5kP.?.C • onCreate(savedlnstanceState) ; 

5fikC.Qnfc?J3iy.i5WCR • layout . activi ty_main ) ; 
handler - new HandlerO; 
ref reshFromFeedO; 

> 

private void refreshFromFeedO { 

dialog - ProgressDialog.js/ipjjOhis, ''Loading' 1 , "Loading the Image of the Day"); 

Thread th - new Thread(new RunnableO { 
public void run() { 

IotdHandler iotdHandler - new IotdHandlerO; 
iotdHandler . setListener(Nasalotd.this); 
try { 

iotdHandler. flr.P.t.<J&S.f.?fiitCNasaIotd. this, new URL CURL')')] 

} catch (Exception e) { 
e.printStackTrace(); 

> . 

> 

}); 

th. start(); 
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You told me to extend 
Fragment and now I 
have all these errors. 
What gives? 



LOTS of e\r\ro\rs. 
(Eddh lihC \Y\ 
the is dh 

evirov). 



Extending fragment is the right thing to do... 

But there are a few other changes you’ll need to make in 
your development environment and the Fragment itself for 
everything to work seamlessly. 

Let’s start by updating your development 
environment... 



working with feeds 



Set the android version for your project 



If you hover over the line in the margin of the 
Eclipse editor, you’ll see an error saying that 
class Fragment is not found. Right now, you’re 
probably wondering how the Fragment class 
couldn’t be found if you’re running the app on a 
tablet running Android 3.2! 

The answer is that even though you’re running 
the app on an Android AVD running Android 
version3.2, your project is still set to build using 
version 2.3.3. And Fragment’s hadn’t been 
released in Android 2.3.3 so the class Fragment 
couldn’t be found. 




Update the Android version building 
this project by going to Project 
Properties (right click on the project) 
and select Android. Then select a build 
target of Android 3.2. 



/Wv-oid property sdreen 
in Project Properties. 



Properties for CH06_NASA_lmage_of_the_Day 



type filter texet 

Re sou rce 

Android 

Builders 

► Google 

Java Build Path 
►Java Code Style 
Java Compiler 
►Java Editor 
Javadoc Location 
Project References 
Refactoring History 
Run /Debug Settings 

► Task Repository 
Task Tags 



Select 

Android 3-2- 



Artdroid 



Project Build Target 



Standard Android platform 2.3.3 






Target Name 


Vendor 


Platform 


API L 




□ Android 1.5 


Android Open 5 ounce Project 


1.5 


3 




□ Google APIs 


Google Inc. 


1,5 


3 




□ Android 1.6 


Android Open 5ource Project 


1.6 


4 




□ Google APIs 


Google Inc. 


1.6 


4 




Q Android 2.1-updatel 


Android Open 5 ounce Project 


2,1-update 1 




□ Google APIs 


Google Inc. 


2,1-update 7 




□ Android 2.2 


Android Open 5ource Project 


2.2 


8 




□ Google APIs 


Google Inc. 


2 2 


8 




□ Android 2.3 


Android Open 5ource Project 


2 3 


9 




0 Google APIs 


Google Inc. 


2 3 


9 




0 Android 2.3.3 


Android Open Source Project 


2 3.3 


10 




0 Google APIs 


Google Inc. 


2 3.3 


10 




0 Android 3.0 


Android Open 5ource Project 


3.0 


11 




0 Google APIs 


Google Inc. 


3.0 


11 




0 Android 3.1 


Android Open 5 ounce Project 


3,1 


12 




0 Google APIs 


Google Inc. 


3 1 


12 


W 


'3 Android 3.2 


Android Open 5ource Project 


3.2 


13 


A. 


[0 Google APIs 


Google Inc. 


3.2 


13 


T 



D C 



y 



Pv-ess 

when done- 



you are here ► 



227 



updating calls to activity methods 



Why do you still get errors? 

After you select OK, setting the Android platform 
version for your project, Eclipse will automatically 
rebuild your project using the new platform. The 
Fragment class should be found now, but there are 
still many other errors to contend with. 

Fragments aren't activites 
themselves... 

The implementation of the Nasalotd 
relied on several methods inherited 
by subclassing Activity. But 
Fragment doesn’t extend Activity, 
and now Nasalotd extends 
Fragment not Activity, so those 
methods are out of scope. 



... but they do have access to 
their Activity. 

Fragments can’t be launched by 
themselves. Instead, your app will still 
be launched by an Activity, and 
that Activity is going to assemble the 
Fragments to display on the screen. 

But the Fragment can get a reference 
to the Activity that added it to a 
screen using the method getActivity. 



This code will throw a compiler error 

This line is from the iotdParsed method and is getting a reference to the Title TextView 
using the f indViewByld method. But that method doesn’t exist in Fragment. 



TextView titleView = (TextView) 

f indViewByld (R. id . imageTitle) ; 

V 

-findViewByld doesn't e*ist in tv-aynent 
and will dause a domyile evvor. 



This code works 

Here is the same line of code modified to work in a Fragment. Notice that getActivity is called 
before f indViewByld. This gives a reference to the Activity that launched the Fragment. 



TextView titleView = (TextView) 

getActivity () . f indViewByld (R. id. imageTitle) ; 

i -a 

\ Calling jetMtivity returns a re-Perende to the Activity that 

displayed the -(raiment- Then you dan eall *Pind\/iewBy|d 
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Below is the iotdParsed method that is called when the parser 
completes parsing and the results are displayed on the screen. 
Modify the code below to use getActivity ( ) to retrieve the 
Activity and make this Fragment work correctly. 



public void iotdParsed (final Bitmap image, final String title, 
final String description, final String date) { 

handler . post ( 

new Runnable () { 

public void run() { 

TextView titleView = (TextView) 

f indViewByld (R. id. imageTitle) ; 
titleView. setText (title) ; 

TextView dateView = (TextView) 

f indViewByld (R. id. imageDate) ; 
dateView. setText (date) ; 

ImageView imageView = (ImageView) 

findViewByld (R. id. imageDisplay ) ; 
imageView. setlmageBitmap (image) ; 

TextView descriptionView = (TextView) 

findViewByld (R. id. imageDescription) ; 
descriptionView. setText (description) ; 



} 



you are here ► 
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Solution 



Below is the iotdParsed method that is called when the 
parser completes parsing and the results are displayed on 
the screen. You should have modified the code below to use 
getActivity ( ) to retrieve the Activity and make this 
Fragment work correctly. 



public void iotdParsed (final Bitmap image, final String title, 
final String description, final String date) { 



handler .post ( 

new Runnable () { 

public void run() { 

TextView titleView = (TextView) 

getA^tivityO. f indViewByld (R. id. imageTitle) ; 
:itleView. setText (title) ; 



All the -find\/iewBy|d 
tails need to be pv-eteded 
by getActivity- 




TextView dateView = (TextView) 

^ getA^tivityO. findViewByld(R.id.imageDate) ; 
dateView. setText (date) ; 

ImageView imageView = (ImageView) 

9etAAWi-tyO- f indViewByld (R . id . imageDi splay ) ; 
imageView. setlmageBitmap (image) ; 

TextView descriptionView = (TextView) 

ge-fcAAivi-tyO. findViewByld (R. id. imageDescription) 
descriptionView. setText (description) ; 



} 



d- 

Jjo this! 





Go through the Activity and look 
for other errors that can be fixed by 
calling getActivity before the 
method call not being found. 
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Update the lifecycle methods 

The lifecycle methods of a Fragment are also a bit different than 
Activity. One of the major differences are lifecycle methods that 
allow code to execute when lifecycle methods happen on the associated 
Activity. 

Another major change is in onCreate in your Activity you configured 
the Activity and set the view. With Fragments, onCreate is 
separated into two methods, with an additional method added called 
onCreateView which returns a View. This allows the Activity to 
control the view generation and query the Fragment for their Views. 

These methods are based cm 




you are here ► 
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Verify the lifecycle methods 

The only lifecycle method overridden inNasalotd 
is onCreate, which contains all of the initialization 
and configuration for the Activity. When 
migrating to Fragments, this code needs to split 
up since the lifecycle includes separate creation, 
attachment, and rendering methods to facilitate 
combining fragments. 

The handler creation and invoking the feed refresh 
can still happen in onCreate. 



The handler and refresh 
dan s*tay in onCrea*te 



public void onCreate (Bundle savedlnstanceState ) { 

super . onCreate (savedlnstanceState) ; 
handler = new Handler (); 
ref reshFromFeed ( ) ; 

setContentView (R. layout . activity_main) ; 



} 






But the view creation has to happen separately. 
Fragment has a special lifecycle method that returns 
the View for the Fragment called onCreateView. 
But rather than returning an R constant for the View 
XML, you return an instantiated View. 



Setting the don-tent view needs to dhange 
sinde fragments need to vetw-n theiv- view 
in onCveateView vathev than setting the 
dontent view tov- the entiv-e Adtivitv- 



I- 



onCveate\/iew veWns 
an instantiated View. 



public View onCreateView (Layoutlnf later inf later, 

ViewGroup container. Bundle savedlnstanceState) { 



//View instantiation goes here . . . 
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Wait, how are you 
supposed to instantiate 
a View? I thought Android 
did that for you! 



You can instantiate Views yourself, too. 

The set Con tent View method is a helper method 
that takes an R file constant and creates a View. 

This works internally by looking up the XML layout 
defined by that constant, parsing the file, and creating 
and configuring each View specified in the layout. 

This creation of real views from layout 
XML is called inflation . 





The layout XML 
•file goes in. 



The Layoutlnf later processes 
the layout XML f ile and 
instantiates the Views that 
ave desdv-ibed in the XML file- 



Onte inflated, the View dan be 
vetuv-ned in onGreateView 



you are here ► 
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Using layoutlnflater 



It sounds like a Layoutlnflater will do the 
job, but where do you get the Layoutlnflater? 

There are a few parameters passed in to the 
onCreateView method, and one of them is a 

Layoutlnflater. And you can use it to inflate ^ layout in-Plater is passed in to 

your View defined in the Fragment’s layout. / rajment s onCreate\/iew. 



public View onCreateView ( Layoutlnflater inflater, 

ViewGroup container, Bundle savedlnstanceState ) { 



You will in-flate your 
layout in here 



Inflating the layout 



The inflate method on Layoutlnflater take 
the R constant of the layout you want to inflate as 
an input parameter. It also takes a root ViewGroup 
that helps the Layoutlnflater configure the 
internal layout inflation. The method also takes a 
boolean parameter indicating whether or not to 
attach the layout to the ViewGroup being passed in. 



The in-Plate 




public void inflate ( 
int layoutld. 



ViewGroup root, 1 
boolean attachToRoot 



\ 



The R donstant -for the 
layout you want to in-Plate- 

The l/iew^roup root to 
dontigure layout intlati 



ion- 



Indidatin^ whether or not to attadh the 
in-flated view to the ViewGroup- This is 
aoin<\ to be -false -for -fragments- 
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onCreateView Magnets 

Below are empty methods for onCreate, onCreateView, and 
onStart. Complete the methods with the magnets below paying 
close attention to which code belongs in each method. Not all of the 
magnets will be used, so you will have some left over. 



public void onCreate (Bundle bundle) 



Initialization and 
don-figuration 
Code in beve- 



public View onCreateView (Layoutlnf later inf later, 

ViewGroup container. Bundle savedlnstanceState) { 



In-flate and return -the 
view -f or -the -fra<y*ent 



public void onStart () { 



Call “the re-fresb r*etbod 
in here to be sure tbe 
view was Credited 




you are here ► 
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// 





onCreateView Magnets Solution 

Below are empty methods for onCreate, onCreateView, and 
onStart. You should have completed the methods with the 
magnets below paying close attention to which code belongs in 
each method. You should have extra magnets left over. 



public void onCreate (Bundle bundle) 



super . onCreate (bundle) ; 



| handler = new Handler () ; 



The handler tan still be 
Seated in onCreate- 



public View onCreateView (Layoutlnf later inf later, 

ViewGroup container. Bundle savedlnstanceState) { 

Inflate the layout usin<) the layout m-f later 
passed in, and in-Platinj the attivity^j^din layout- 






return inf later . inflate ( 



R . layout . activi ty_main 




container, I false I ) ! 



public void onStart () { 

super .onStart () ; | 



refreshFromFeed () ; 

} 



Re-Presh the -Peed in on start, 
this way, onCreate l/iew will have 
already been tailed and the views 
will have been treated- 



There is no need to tall 

setContentView ( I ^ setContentView sinte 

onCreateView returns the view. 
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Convert NasaEdNews to a fragment 



You’re done converting the Nasalotd to a 
Fragment, but now you have to do the same 
updating to NasaEdNews. They both need 
to be Fragments so you can add them to the 
screen. 



Y 

to tills! 




Update your version of 
NasaEdNews to be a 
Fragment according to 
these changes. 



_ Extend -Pva<y*ent 
^ instead o-P Activity- 



public class NasaEdNews extends Fragment implements EdNewsHandlerListener { 

private static final String URL = "http://www.nasa.gov/rss/educationnews.rss"; 

private Handler handler; 

private EdNewsAdapter listAdapter; 



public void onCreate (Bundle savedlnstanceState) { 
super . onCreate (savedlnstanceState) ; 
handler = new Handler (); 

y^LLonL JHL iixutmt (Tii liji UUL . ud_news j T* ^T” 



Dor/t call 

setContent\/ie\w 



} 



public View onCreateView (Layoutlnf later inf later , 

ViewGroup container. Bundle savedlnstanceState) { 

return inf later . inflate (R. layout . ed_news , container, false); 



} 



public void onStart ( ) { 

super . onStart ( ) ; 




In-Plate the layout 
in onCveate\/iew. 



£jet a ve-Pevende 
bo the Activity, 
then dall 
-Pind\/iewBy|d 



listAdapter = new EdNewsAdapter () ; 

ListView listView = (ListView) 

— 9> getActivity () . findViewById(R.id.ed_news_list) ; 

listView. setAdapter (listAdapter) ; 

ref reshFromFeed ( ) ; 



you are here ► 
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Make the surrounding activity 



Now you’ve converted both Activities to 
Fragments, but you can’t launch a Fragment on 
it’s own. You can combine the Fragments in an 
Activity and display the Activity... but you don’t 
have an Activity in your app. 

Now you’ll make a new Activity, and render 
the Image of the Day and Education News 
Fragments in that new Activity. 



This is *thc new Activity you II 



dveate to display the -pY-a^ents- 




NasaApp Otebvrfcy) 






These ave the two Fragments you just 
ton vevted *fv-om Activities. These will be 
displayed*! *m youv new Activity- 
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Create a new Activity java class 



In the Eclipse Package Explorer, navigate to the 
project source (CHO 6_NASA_Image_of_the_Day 
if you’re using the example code). Go to src/ com/ 
headf irstlabs/chO 6/nasa/iotd. Right click 
on the iotd package and select New — » Glass. Gall the 
new class NasaApp . j ava. 




Create a new Activity 
tailed NasaAppjava 
the sourte -folder. 




nasa_app . xml. 



you are here ► 
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Puilt out a basic Activity 

You just created a class and a layout for the 
Activity, but they are both empty Start by building 
out NasaApp . j ava to extend Activity, and 
create an onCreate method to render the layout. 



public class NasaAppActivity extends Activity { 

protected void onCreate (Bundle savedlnstanceState) { 
super . onCreate (savedlnstanceState) ; 
se tContentView (R . layout . nasa_app) ; 



} 



} 





NasaApp.java 




How come I was supposed to get rid of 
the setContentView methods from the 
Nasalotd.java and NasaEdNews.java, but 
add it here? 



NasaApp is an Activity, not a Fragment. 

You just converted both Nasalotd.j ava and 
NasaEdNews . j ava to be Fragments instead 
of Activities, and Fragments should use 
onCreateView which returns a View instead of 
setting the Content View. But NasaApp . j ava is an 
Activity, and it should set the Content View. 
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Update the manifest 

The AndroidManif est . xml contains metadata 
about how your app is configured, and how to run 
and install it. You first modified the manifest file in 
Chapter 3 to add permissions to access the network. 
The manifest file also includes a reference to the 
Activity to launch. And since you’re changing 
the Activity to launch (from Nasalotd to 
NasaApp) you need to update the manifest. 



Application android: icon="@drawable/icon" android: label="@string/app_name" > 

activity android : name=" . NasaApp" Wpdate ihe i* 

android: label="@string/app_name" > ihc Activity bo -NdsaApp -(Vor* Nasafoid 

<intent-f ilter> sin£e NasaApp is "the new A^tivi^ty* 

<action android: name="android. intent . action .MAIN" /> 

<category android : name="android . intent . category . LAUNCHER" /> 

</ intent-f ilter> 

</ activity> 

</ application> 




AndroidManifest.xml 




Open the AndroidManif est . xml file in 
the project root. Click on the tab to the right 
labeled AndroidManifest . xml to edit 
the XML directly. Update the android:name 
attribute in the Activity to point to the 
new Activity you just created. 



you are here ► 
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Tqst Drwq 



Run the app now to verify everything is starts and renders the 
Activity 

The app v-uns, bu”t "the sev-een is emp-ty. 
^ This is^^i surprising sin£e you are 
displaying a layo-t "tha*t has no V\ ev/s. 



5 5 5 4 API 1 3 -Tablet 





The layou-t you jus-t 
erea-ted in /VasaA pp.-x.ml 
does no”t don-tain any 
\A ews yet 



<?xml version="l . 0" encoding="utf-8"?> 

<LinearLayout 

xmlns : android="http : //schemas . android.com/apk/res/android" 
android : orientation="horizontal" 
android : layout_width="match_j?arent" 
android : layout_height="match_parent"> 

</LinearLayout> 




nasa_app.xml 
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It’s no surprise the layout is empty... 

You created the new Activity and layout, but you 
haven’t populated it yet. The fragments need to be 
displayed on the screen too. 

Now that you have the completed Fragments and 
an Activity to display them, let’s see how to 

display the Fragments on screen . 



you are here ► 
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Add the fragments to your layout 

Fragments can be added to a screen 
in the XML layout. There is a special 
<f ragmen t> element added to XML 
layouts after Fragments were introduced. 



li's a good idea -to add an andvoidnd 
aiiv-ibuie •fw youv -Pvagmewt- This will 
allow you -ho neivieve and dontiguve -the 
fragment -fvom youv- adtivity la-tev- on- 



<fragment android :name=" 
android: id=" 




rr 



The -fully ^uali-fied 
dass name o-f y our 
-fnag ment goes hev-e 




android 

android 



Vou dan use v-egulav- layout 
attv-ibutes on a -fragment 
just like any other \/iew. 



layout_width="wrap_content" 

layout_height="wrap_content" 



/> 



tliereiare no 

Dumb Questions 



n You’re defining a fragment in the layout, but assigning 
View layout attributes. Can you do that? 



Yes. You’re defining the fragment attribute and referencing 
the fragment class. But the view is rendered to the screen, and 
view attribute control how the view is laid out. 



% Do I have to do any other configuration to make the 
fragment load? 



No, defining the fragment in the layout renders the view and 
instantiates the fragment class. 



% Do I have to start the fragment or call any of the other 
lifecycle methods? 



A: 



Nope! That’s all done for you automatically. 



% Do I have to declare it in the layout? What if I want to 
programatically decide which Fragment to add? 



You can add fragments programatically in addition to 
declaring them in the layout. Check the online docs for more 
information. 
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Below is the empty layout for nasa_app . xml. Add both the Nasaiotd and 
the NasaEdNews Fragments to this layout. Add them to the current horizontal 

LinearLayout below. Make sure to give the Fragments android : id 

attributes as you would for other Views. 



<?xml version="l . 0" encoding="utf-8"?> 

<LinearLayout xmlns : android="http : / / schemas . android . com/ apk/ res/ android" 
android: orientation="horizontal" 
android: layout_width="match_parent" 
android : layout_height="match_parent"> 



</ Linear Layout> 



you are here ► 
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Emc'tSe 

Solution 



Below is the empty layout for nasa_app . xml. You should have add both the Nasaiotd 
and the NasaEdNews Fragments to this layout. You should have added them to the 
current horizontal LinearLayout below. You also should have given the Fragments 
android : id attributes as you would for other Views. 



<?xml version="l . 0" encoding="utf-8"?> 

<LinearLayout xmlns : android="http : // schemas . android . com/ apk/ res/ android" 
android : orientation="horizontal" 
android : layout_width="match_parent" 
android : layout_height="match_parent"> 



The o( -the 

day ‘fragment 



fragment ar\droid^amc— dom.head'fiv-s*tlabs.dhOi.r\asa io*td Nasa|o*td w 
android-id— ”$+id/^ragment_io*td w 
ahdv-oid^ayout^wid'th^y/rap^oh-te^ 
android : layout_height— ”wrap — dontent W 
android : layout_ ^ /> 



Fully «\uali-fied 
dlass names o-f -the 
-fragments 



3^dv-oid^ame— ^om.head^iv-stlabs.dhO^hasa io-td /VasaEdNews^ 

The edudation android : id— w @+id/ ‘fragment__ed__ne>ws w 

news -fragment 

android : layout_width— *Wap__dontent” 
android-layout_height— Wap__dontent' ; 
android;layout_weight— *1 w /> 



</LinearLayout> 
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Tqst DriVq 



Run the app again. At this point, you should see both of the 
fragments displaying on the screen. 




hUp/A/vww. 



iv/liume/liqnews/201 



320 LundOuliib.liUiil 



w/home/hanews/20 1 



huuJAvwvt., 



iv/lioiiie/lnf news/201 



i/HO 1 1-307 Robot Piue.hu 



fFarm 7 Mission At The Rock Ranch, Ga. 

■ Center, Fla., will travel to The Rock Ranch. Ga., on Sept. 24 to participate i 



NASA Daily Image 



Orion Prepares for Next Round of Acoustic 
Testing 



The Orion MPCV ground test vehicle is lifted into the acoustic chamber at Lockheed Martin's 
facilities near Denver on Thursday. Sept. 15, 2011, in preparation for the Launch Abort Vehicle 
Configuration Test. For this test, the MPCV, or multi-purpose crew vehicle, is covered with fillets 
and ogive panels which resemble the vehicle’s launch configuration. The spacecraft will undergo 
testing at sound pressure levels that emulate those experienced at launch and in the event an abort 
is needed to carry the crew to safety away from a potential problem on the launch pad or during 
ascent. Image Credit: NASA 



NASA 2012 Lunabotics Competition Open For Registration 

NASA is accepting applications from teams of U.S. and international undergraduate and graduate students for the 
third annual Lunabotics Mining Competition. The event will be at NASA's Kennedy Space Center in Florida May 
21 26,2012. 



NASA Selects Teachers For Student's Reduced Gravity Experiments 

Teachers from 14 NASA Explorer Schools (NES) have been selected for the 201 1 School Recognition Award for their 
contributions to science, technology, engineering and mathematics (STEM) education. 



Plant Experiments Take Root On Space Station To Inspire Students 

A unique science project designed to sow the excitement of scientific discovery in students is sprouting this week 
aboard the international space station. 

httDyMww.nas3.eov/home/hanews/2011/seo/HQ 11-319 ISS Plants.html 

NASA and The Cleantech Open Partner in Robotics Challenge 

NASA has selected The Cleantech Open of Redwood, Calif., to manage the agency's Night Rover Challenge that will 
culminate in a competition in fall 2012. 

liUpJAmvw.ndSd.f!UV/liume/liifnews/20l 1/sep/HO 11-318 Niplil Rover Clidllenpe.html 

NASA Announces International Space Apps Competition 

NASA is announcing the International Space Apps Competition to support the Open Government Partnership (OGP). 
which President Barack Obama announced Tuesday. 

http://www.nasa.pov/home/hgnews/20 1 1/seo/HO 11-313 Space Appshtml 

NASA and Cafe Hosting Green Flight Challenge 

NASA and the Comparative Aircraft Flight Efficiency (CAFE) Foundation of Santa Rosa, Calif., will hold the 20 1 1 Green 
Flight challenge, sponsored by Google, at the Charles M. schulz sonoma county Airport in Santa Rosa from sept. 25 
to Oct. 1. 

httDj/mvw.nasa.eov/home/hanews/20 1 1/seo/HO Mil-200 Green Flieht Challenee.html 

The Challenge Is On: Robot Prize Competition Registration Opens 

NASA and the Worcester Polytechnic Institute (WPI) in Worcester, Mass., arc seeking teams to compete in a robot 
technology demonstration competition with a potential $1 .5 million prize. 



NASA Participates InSp, 

Educators from NASA's Kenne^ 



O 1 EEB 



This screen is just a big horizontal LinearLayout 
with two large Views... the two fragments! 



you are here ► 
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Test it on a small screen 

Right now you’re testing the app on the 
default tablet size for the emulator, WXGA, 
which is a sizable 1280x800. But not all of 
your users’ devices are going to be that big, 
even tablets. Let’s make a small Android 
Version 3.2 AVD to see how the app looks. 



Name -the JW/V APII3- 

Tablel -l>OOAOO so you 
k now the siz* and version- 




Target: 

CFU/ABI: 



Create new Android Virtual Device (AVD) 



API1 3 -Tab let-600- 4 00 
Android 3.2 - API Level 15 

ARM (armeabi) 




Select Andv-oid 
IX Level 15. 



5D Card: 



0 Size: 512 



MiE r 



0 File: 



Browse... 



Snapshot: 

Enabled 



Override ike de-Pauli 

resolution and sei ii 
io L>00 * *rOO. 



0 Built-in: | Default [WXGA] 



^*) Resolution: 600 x 400 



Hardware: 



Property | Value 


New... 


Abstracted LCD density LOO 

Keyboard lid support no 

Max VM application heap si 48 
Device ram size 256 


| Delete 



0 Override the existing AVD with the same name 



^ Cancel J : ■ Create AVD^ - 



Clitk -finish when 
youVe done- 



Launch the emulator and run the app. 
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NASA 2012 Lunabotics Competition 
Open For Registration 

NASA is accepting applications fronn teams of U.S. 
and international undergraduate and graduate 
students for thethird annual Lunabotics Mining 
Competition. The event will be at NASA's Kennedy 
Space Center in Florida May 21-26, 2012. 
http://www.na53.gov/home/hqnew5/20 1 J/sep/ 

HO 320 Lunabotics, html 



Con 

troi 

Roo 

m 

Dun 

ng 



NASA Selects Teachers For 
Student's Reduced Gravity 
Experiments 

Teachers from 14 NASA Explorer Schools {NES) 
have been selected for the 201 1 School Recognition 
Award for their contributions to science, technology., 
engineering and mathematics {STEM) education. 

h ttp;//www. nasa.go v/home/hqnews/20 1 1/sep/ 




That looks pretty awful. 

I think this screen is 
too small to display both 
fragments on the screen. 



It is definitely too small for these fragments. 

There are no firm rules about how many fragments you can 
display on the screen. These two fragments take up a lot of 
space, so they don’t work well together on small screens. They 
look great together on large screens though. 

But one way or another, you’ll need to fix this on small screens... 



you are here ► 
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Screen Bmups Vp Ch$e 

In Chapter 5, you build optimized layouts for small screen devices and 
landscape. Using the same R constant, layouts are dynamically loaded based 
on their screen size category (small, med, large, and a recent addition, 
x-large). These are your layout folders from Chapter 5. 




Android 3.0 introduced the idea of minimium screen widths and heights 
to determine the dynamic layout loading. So instead of declaring small, 
med, or large screen widths, you can declare screen widths in Density 
Independent Pixels (DPs). 

The name of the folder determines in the screen size the layout applied for. 
And just like the screen group following the layout in the folder name, so 
does the screen size. The difference is that the width or height is specificed 
with a w or h, followed by the dimension in DPs. Screens larger then 
the specified width or height load the layouts in the folder. 




This -Polder’s layouts will 
be loaded i-P the width is 
greater than GOOdp 




This -Polder’s layouts will be loaded 
i-P the width is greater than ^00 dp, 
but only up to GOOd p i-P the layout- 
vGOOdp -Pilder is included also. 



For newer versions of Android , either the old style screen groupings or the new minimum 
screen size approach will work. However, older versions of Android require the older style 
screen grouping approach. The new and old screen grouping approaches can work together, 
and you’ll need to do that if you plan on supporting older versoins and new versions of 
Android in the same app. 
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Use two optimized layouts 

Since both of the fragments won’t really fit on the 
small 600x400 screen, let’s make special layouts for 
large and small screens according to the minimum 
screen width and height optimized layouts in 3.0. 



One large layout 

If the screen is large enough, display 
both of the fragments side by side. 
Depending on your target devices and 
application content, this size might 
vary. For the Nasa App, let’s define the 
minimum size as 800 pixels for side 
by side fragments. This will be a new 
layout specifying screen sozes 800 pixels 
wide or above. 



4 



greater than 800 






Image of 
the Day 



Education 

News 



One small layout 

If the app is less that 800 pixels, just 
display the Image of the Day 
fragment and not the Education 
News. This will be the layout in / 
res /layout /main . xml. 



less than 800 

4 > 




you are here ► 
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Create the large screen layout 

Just like the landscape mode, newer versions 
of the Android Eclipse Plugin allow you 
to configure the minimum layout width 
directly from the new Android XML File 
wizard. Launch the wizard now and create 
the large screen optimized XML layout. 



New Android XML File 



The -file should 
be rnam%ml 



Select smallest 

sdveem width 



New Android XML File 

Creates a new Android XML file. 



© 



Project CH06_N AS A_l mag e_of_th e_Day 
— ;l a — main.xml 

What type of resource would you like to create? 

0 Layout 0 Values 

0 Color List 0 Animator 

0 Preference 0 Searchable 

What type of resource configuration would you like? 



0 Drawable 
0 Animation 



0 Menu 

0 AppWidget Provider 




GD 




Folder /res/layout-wSOOdp 

Select the root element for the XML file: 
LinearLayout 



T: 



Ufa eoo 

here as -the 

minimum 

width- 



f Cancel f Finish 



Press -finish 
when youVe 
done- 



3 
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Screen 'Sup'pQvt Fxpo&ed 

This week’s interview: 

How do you keep it all straight? 



Head First: Thanks for taking time out of your 
busy schedule of laying out screens and determining 
which layouts to use to come and talk to us. 

Screen Support: A pleasure, as always. 

Head First: You know, I thought the small, normal, 
and large screen sizes which seemed a little hard 
to keep track of. Then I learned about screen pixel 
density and seemed like a LOT to keep track of. 

Screen Support: Ah yes, the good old days. 

Head First: The good old days? 

Screen Support: Yes. Back then I just had one 
system of screen sizes to keep track of. Now I have 
to keep track of all of that, plus the new system of 
defining widths directly in the folder name. 

Head First: I honestly don’t know how you do it. 

Screen Support: Oh it’s not that bad. I just have 
an algorithm I follow to figure out which resource to 
use. It’s not like I’m making random decisions myself 
or anything. 

Head First: But don’t developers get frustrated 
trying to nail down the different resources? 

Screen Support: Some do. But they get used to 
my algorithm and then they know what layouts to 
build for what screen sizes. And they know which 
to override to make some device work the way they 
want. 

Head First: I’m still shocked that this doesn’t 
confuse you, all of these different layouts in the same 
app! It would drive me nuts! 



Screen Support: If you want to really go nuts, 
check out all of the other overrides you can do for 
each layout in addition to size and pixel density. 

Head First: You’re kidding, there’s even more? I 
had a hard enough time keeping up with this already! 

Screen Support: Sure! You can also override 
layouts by input type. Say for example you have an 
app with an on screen numeric keyboard for touch 
screens. You can customize the layout for 1 2-key 
devices to remove the keyboard since they already 
have hardware buttons. 

Head First: OK, this is just getting out of hand. 

Screen Support: And I’m not even done! You 
can also customize your layouts by locale. Say for 
example, you’re working with a language that reads 
right to left instead of left to right. You can add 
customized layouts that reverse parts of the screen 
for those languages. 

Head First: Enough already! You lost me with the 
12 key devices! 

Screen Support: Like I said though, it’s a piece of 
cake. 

Head First: Of course, its the algorithm right? 

Screen Support: Sure is! It’s all in the algorithm. 
As long as we both follow the same rules, there will 
be no nasty surprises! 

Head First: I’m going to take your word for it. 

Screen Support: Suit yourself! Just remember, 

I’m here when you need me. 



you are here ► 
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£ong ExeRciSe 



Below are the layouts for the main . xml in both the the res/layout folder and the 
res/layout-w 800 dp folder. Modify the main . xml in the layout folder to display just 
the Nasaiotd fragment for small screen devices. Also modify the currently empty layout 
in layout-w 8 0 Odp/main . xml to show both fragments. 



<?xml version="l . 0" encoding="utf-8" ?> 

<LinearLayout xmlns : android="http : //schemas . android . com/ apk/ res/ android" 



android : orientation="horizontal" 
android : layout_width="match_parent" 
android : layout_height="match_parent"> 

<f ragment android : name="com . headfirst labs . chO 6 . nasa . iotd . Nasaiotd" 
android: id="@+id/ f ragment_iotd" 
android : layout_width="wrap_content" 
android : layout_height="wrap_content" 
android : layout_weight="l" /> 

<f ragment android : name="com . headfirst labs . chO 6 . nasa . iotd . NasaEdNews" 
android : id="@+id/ f ragment_ed_news" 
android : layout_width="wrap_content" 
android : layout_height="wrap_content" 
android : layout_weight="l" /> 



</LinearLayout> 




nasa_app.xml 
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Below are the layouts for the main . xml in both the the res/layout folder and the 



res / layout -w8 0 0 dp folder. Modify the main . xml in the layout folder to display just 
the Nasaiotd fragment for small screen devices. Also modify the currently empty layout 
in layout-w8 0 Odp/main . xml to show both fragments. 



<?xml version="l . 0" encoding="utf-8"?> 

CLinearLayout xmlns : android="http : / / schemas . android . com/ apk/ res/android" 



android : orientation="horizontal" 
android : layout_width="match_parent" 
android : layout_height="match_parent"> 

<f ragment android : name="com. headf irstlabs . chO 6 . nasa . iotd . Nasaiotd" 
android: id="@+id/ f ragment_iotd" 
android : layout_width="wrap_content" 
android : layout_height="wrap_content" 
android: layout_weight="l" /> 




should ohly doK-taih the 
Afasalotd ^ragme^t- So 
remove the edueatio* 

hews -(Vagmeht- 



The small sdreeh layout 
ih layout/ maih-Xml 



. NasaEdNews" 



</ Linear Layout> 




nasa_app.xml 
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<?xml version="l . 0" encoding="utf-8"?> 

<LinearLayout xmlns : android="http : //schemas . android . com/ apk/ res/ android" 
android : orientation="horizontal" 
android: layout_width="match_parent" 
android : layout_height="match_parent"> 




c-Pra^ment ar\droid:har«c— dom.hcad^irstlabs.dhOi.r\asa io*td Nasa|o*td w 
ahdv'oid:id- , ^+id/^v*a3^ch*t_io*td w 



The entire 
Contents ot 
layout/ rna’m-*w»l 
move to the lar^e 
sdreeb layout 



android : layout_width— *Wap__ dontent* 
android^ayout^hei^ht— w >wrap_dontent ; 
android^layout^v/eight—^l ” /> 




-fragment android^ame—^dom.head'firstlabs.dhO^.nasa.iotd NasaEdNey/s 
andr oi d : i d—^ ^+i d/-f r a^rn ent^ed^nev/s^ 
android : layout_width— ’Wap^dontent* 
android : layout_hei3ht— ’Wap^dontent” 
android^layout^y/eight—^l w /> 



)) 



</ Linear Layout > 




you are here ► 
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Drove 



Now that you have optimized layouts for small screen and large (over 
800 dp width) devices, run the app again and make sure it works on 
both devices. Use the AVD selection dialog in Eclipse to run the app 
on both AVDs if you are running them at the same time. 




5556:API13-Tablet 



Refresh 



NASA and Cafe Hosting Green Flight Challenge 

NASA and Ihe Comparative Aircraft Flight Efficiency (CAFE) Foundation of Santa Rosa, Calif., mill hold the 201 1 Greet 
'Flight Challenge, sponsored by Google, at the Charles M. Schulz Sonoma County Airport in Santa Rosa from Sept. 25 
toOci. 1. 

httpSAwM.nasa.gov/home/hqnews/201 1 /sep/HO Ml 1-200 Green Flight Challenge.html 



The targe 
s£\reeh -roirrKd-t 
still looks good. 



NASA Daily Image 

View of Mission Operations Control 
Room During the Apollo 13 Mission 



Set Wallpaper NASA 2012 Lunabotics Competition Open For Registration 

H ^ NASA is accepting applications from teams of U.S. and international undergraduate and graduate students for the 
third annual Lunabotics Mining Competition. The event will be at NASA's Kennedy Space Center in Florida May 
21-2b. 2012. 

hUuSAwM.ndSd.euv/livnie/1iunews/20 1 1 /seu/HO 320 Lundtivlnyhlinl 



NASA Selects Teachers For Student's Reduced Gravity Experiments 

Teachers from 14 NASA Explorer Schools (NES) have been selected for the 201 1 School Recognition Award for their 
contributions to science, technology, engineering and mathematics (Si EM) education. 

hnpSAWM.nasa.gov/home/hqnews/20t 1 /sep/HQ 1 1-316 Gravity Flighthtml 

Plant Experiments Take Root On Space Station To Inspire Students 

A unique xience project designed to sow the excitement of scientific dixovery in students is sprouting this week 
aboard the International Spare Station 

hupsAvww.nasa.gov/home/hqnews/2Ui i /sep/H(j 1 1-319 IX> riants.html 

NASA and The Cleantech Open Partner in Robotics Challenge 

NASA has selected The Cleantech Open of Redwood, Calif., to manage the agency's Night Rover Challenge that will 
fulminate in a competition in tall 7017 

NASA Announces International Space Apps Competition 

NASA is announcing the International Space Apps Competition to support the Open Government Partnership (OGP), 
which President Barack Obama announced Tuesday. 

httnS/wwwnASAgov/home/hanews/?01 1 /sen/HO 11-111 Snare Annshtml 



Gene Kranz (foreground, back to camera), an Apollo 1 3 Flight Director, watches Apollo 1 3 astronaut 
and lunar module pilot Fred Haise onscreen In the Mission Operations Control Room, during the 
mission's fourth rplpvisinn transmission on the pvening of April i s. 1970. shortly aftpr thp 
transmission, dll explosion occurred that ended any hope of a lunar landing and jeopardized the IT 
lives of the crew. Image Credit: NASA U 



' The Challenge Is On: Robot Prize Competition Registration Opens 

NASA and the Worcester Polytechnic Institute (WPI) in Worcester. Mass., are seeking teams to compete in 
technology demonstration competition with a potential $ l .5 million prize. 

htluSAwM.ndSd.eov/hvine/1iurtews/201 1/seu/HO 11-307 Robot Frue.hlml 
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A*d -the 

s cxctt\ 'fovma't 

looks yeat -too. ^ 




5554:API13-Tablet-600-400 



Wx 3 NASA Daily Image 



\/iew of Mission Operations Control 
Room During the Apollo 13 Mission 



Refresh Set Wallpaper 



3 



D 




That looks great! Add 
more content only where 
it works. Perfect! 



Fragments made is all possible 

This is a perfect example of customizing your app 
to render more or less content based on screen size. 
And with fragments, it was easy to just add or remove 
content (and the functionality to support the content 
like the feed refreshing) just from your layouts without 
having to move a lot of code around. 



you are here ► 



259 



testing functionality 



Test the app functionality 



Speaking of functionality, this is a great time 
to test the app and make sure everything 
works. You already know the feed is 
refreshing correctly, but what about scrolling 




Oucli! The 

app crashed! 



and the on screen buttons? 



A A 

I 



I ^ NASA Daily Image 

View of Mission Operations Control 
Room During the Apollo 13 Mission 



1 1 



A Sorry! 



NASA Selects Teachers For Student's Redded Gravity Experiments 



pace Station To Inspire Students 



The application NASA Daily Image (procp^ VffT 
headfristlabs.ch06.nasa.iotd) has stopjwu Ofiexpectedly. 
Please try again. 



mer in Robotics Challenge 



ice Apps Competition 



NASA and Cafe Hosting Green Flight Challenge 



The Challenge Is On: Robot Prize Competition Registration Opens 
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Why is the app crashing? 

The feeds are loading correcdy, and 
scrolling works. But when you press the 
butons, the app is crashing. Here is the 
output. 



j ava . lang . IllegalStateException : 

Could not find a method 

onRef reshButtonClicked (View) in the activity 
class com. headfirst labs . chO 6 . nasa . iotd . NasaApp 
for onClick handler on view class android . widget . Button 
with id ’ ref reshButton ' 







Can you figure out what the error is referring to? 
Why might this error be occurring? How would you 
fix it? 



you are here ► 
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Add onClick methods to the activity 



To make the buttons work, you added 
android: onClick attributes to the buttons 
and corresponding methods in the Nasalotd 
Activity. There’s just one big problem... 

Nasalotd isn’t the Activity anymore, it’s a Fragment. 

NasaApp is the Activity now. So even though 
you have the corresponding onClick methods 
in Nasalotd, the Android action code is 
looking for the android : onClick methods in 
NasaApp. 




m 





o*RetreshButtoKCIi£kedO 

oKSetl/VallpaperO 



The methods aren't in 
the Activity, they are 
m the -fragment- 
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Make the buttons work 



Both of these methods are already implemented in 
Nasalotd, they just aren’t receiving the event since 
they are a Fragment not an Activity. So all you really need 
to do is pass the event to the Fragment. 

You can pass the event to the Fragment, but first 
you need to get a reference to the Fragment from the 
Activity so you can call the onClick methods in 
the Fragment. 

That is where the FragmentManager comes 
in. The FragmentManager allows you to retrieve 
references to Fragments. The following code 
implements both of the onClick methods, retrieves the 
FragmentManager and calls the underlying method 
in the Fragment. Fragment 




Add these two methods to the 
NasaApp Activity. These 
receive the expected onClick 
calls and pass them along to the 
underlying Fragment. 



-the Pvagi-neirt/VJa*, 



lagev. 

public void onRef reshButtonClicked (View view) { | 

FragmentManager f ragmen tManager = getFragmentManager ( ) ; 

Nasalotd nasalotdFragment = (Nasalotd) 

3 f ragmentManager . f indFragmentByld (R . id . f ragment_nasa_iotd) ; 

/ nasalotdFragment . onRef reshButtonClicked (view) ; ' Pass the tall through 



} 



Find the -(Varment usin<) 
tindFragmentByld- 



to the -(Varment- 



public void onSetWallpaper (View view) { 

1 FragmentManager f ragmentManager = getFragmentManager () ; 

^ J Nasalotd nasalotdFragment = (Nasalotd) 

f ragmentManager . f indFragmentByld (R. id. f ragmen t_nasa_iotd) ; 

nasalotdFragment . onSetWallpaper (view) ; 



} 



Inclement the same 
pv-otess to\r onSetl/Vallpapev- 




NasaApp.java 
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Tqst DriVq 



Now that you added the onClick methods to the NasaApp 
Activity, run the app again and see if the force close is resolved. 




Refresh S< 






NASA Daily Image 

View of Mission Operations Control 
Room During the Apollo 13 Mission 



I Gene Kranz (foreground, back to camera), an Apollo 13 Might Director, watches Apollo 1 3 astronaut 
I and lunar module pilot Tred liaise onscreen In the Mission Operations Control Room, during the 
I mission’s fourth television transmission on the evening of April 13, 1970. shortly after the 
I transmission, an explosion occurred that ended any hope of a lunar landing and jeopardized the 
I lives of the crew. Image Credil: NASA 



NASA 201 2 Lunabotics Competition Open For Registration 

NflC^is accepting applications from teams of US. and international undergraduate and graduate students for the 
I third annual Lunabotics Mining Competition. The event will be at NASA's Kennedy Space Center in Florida May 
21 ^ 2012 . 

S 

NASA Selects Teachers For Student's Reduced Gravity Experiments 

Teachers from 1 4 NASA Explorer Schools (NES) have been selected tor the 20 1 1 School Recognition Award tor their 
contributions to science, technology, engineering and mathematics (STEM) education. 

Plant Experiments Take Root On Space Station To Inspire Students 

A unique science project designed to sow the excitement of scientific discovery in students is sprouting this week 
aboard the International Space Station. 

NASA and The Cleantech Open Partner in Robotics Challenge 

NASA has selected 1 he Cleantech Open of Redwood, Calif., to manage the agency's N ight Rover challenge that will 
culminate in a competition in tall 2012. 



NASA Announces International Space Apps Competition 

NASA is announcing the International Space Apps Competition to support the Open Government Partnership (OOP), 
which President Barack Obama announced luesday. 

NASA and Cafe Flostlng Green Flight Challenge 

NASA and the Comparative Aircraft Flight Efficiency (CAFE) Foundation of Santa Rosa, Calif., will hold the 20 1 1 Green 
Flight challenge, sponsored by Google, at the Charles M. Schulz Sonoma County Airport in Santa Rosa from Sept. 2S 



The Challenge Is On: Robot Prize Competition Registration Opens 

NASA and the Worcester Polytechnic Institute (WPl) in Worcester, Mass., are seeking teams to compete in a robot 
technology demonstration competition with a potential 1 1 .5 million prize. 

liilpJtoww.njsj.gov/liwiit/liqnewrtO 1 lAefi/HO 11-307 Robol Piue.htnil 



H:25h • 



No errors! Now check the home screen to 
see if the wallpaper was set. 
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The wallpaper 
setting looks great! 



SS56:API13 Tablet 





This is just a fantastic app! 
Cool images, optimized for 
tablets in various sizes. I'm 
impressed! 



Brilliant work 

You’ve got the complete Nasa Image of the Day 
app is working great. The tablet app is running 
with Fragments so you can easily add and remove 
on screen content based on screen size. And this 
was on top of the already super customized layout 
work you did in Chapter 5. This is one tuned app! 
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G® Off Piste 

That was some great work you did Fragments in this chapter, and all of the other work 
on the Nasa Image of the Day. Here are some ideas for additional exploration. 



New Activities -Pov- Sntc . pevides 

I* -this dhapter, you only showed "the Image 
ol -the Day fragment -tor small devides. But 
the duration News tan be interesting! 

A^tev reading dhapters l-°! and learning 
more about treating additional Adtivites in 
your app, dreate a sedond Activity using the 
same two -fragments. Then you should be 
able to show both -fragments in one Activity 
or one fragment eadh in two different 
Activities. 



Re-Pvesh both Fragments 

The re-fresh button only works-for the 
Image of the Day Fragment- After 
moving the buttons out of the Image 
fragment, make the refresh button 
refresh both Fragments- 



F*plove Additional Overrides 

|n addition to sdreen size and pi*el density, 
you dan dustomize layouts based on devide 
hardware form fadtors. Try building a 
dustom layout for a spedif id form fadtor 
(like a devide without toudh sdreen support)- 
Then dreate an A\/D for that donf iguration- 
Test that your override works and doesn t 
effedt other form fadtors. 



Move the buttons 

The refresh and set wallpaper buttons 
look a bit dluttered in the fragment on 
sdreen. /Wove them to a button bar, or 
as menu items (after you learn about 
them later in the book). 
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Your Android Toolbox 

Now that you’re getting a 
handle on optimizing for 
tablets, you can build all of 
your apps with tablet support! 

Coywev*t»n$ -to Fv-ajw'Cn't'S 

9 £*W &-ag»ev>t 'mstead Attwity 
0 Call yttetivityO beW any Aetwity 

we iKod you tailed in tbeAetWity you « , 

tonvevtmg 

# Update onClitks and other methanisms 
relying or, dirett attess to an Attw.ty 

# Make any layout u ? dates needed L W the 
Went to layout torv-ettly ins.de another 
view sinte it will no longer be U\ streen 





^ Key/ Sdireeh Coh-fijuvatioh 

lidth ' ay w % Ude " s by " ,ihi " ,u "' s< *«» 

* ^ by «.«. 

f t? Ulw,t! " /*»rwoz+d P will 
" ttt toll- df kijk. 

* «* «M»ol Width whi£h 

!r r, tr ?° ^ “ wwtood. 

<wly load ,{ both the width |HND the P 
he. 3 ht arc greater thar. t>OOdf. 




BULLET POINTS 



■ Install new Android versions as needed 
using the SDK and AVD Manager 



■ Make new AVDs for new versions 



■ Set the Android version for your project in 
Project Preferences 

■ Combine multiple Activities on one 
screen using Fragments 

■ Convert existing Activities to 
Fragments, or write new Fragments 

from scratch 



■ Override Fragment lifecycle methods 
as needed, specifically onCreate, 
onCreateView and onStart 



■ Return the Fragment view in 
onCreateView, don’t set the content 
view from a Fragment 

■ Inflate layouts with Layoutlnf later 

■ Add Fragment in layouts (or in code). 
Then the layout is inflated, your fragment 
will be automatically created, started and 
connected to the launching Activity . 

■ Fragments are supported back to Android 
1 .6. View the Android Compatibility 
Package for more information: http : // 
developer . android . com/sdk/ 
compatibility-library . html. 
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# Building a list-based app 




Where would we be without lists? They display read-only information, 
provide a way for users to select from large data sets, or even act as navigational device 
by building up an app with a list-based menu structure. In this chapter, you’ll learn how to 
build an app centered around a list. You learn about Adapters where lists store their data, 
and how to customize the data rendered in your list. 



this is a new chapter 
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Ponna is training for a big race... 

Donna jogs all the time, but she hasn’t raced before. There 
is a big race coming up and she wants to be in super shape 
to get a great time. 

Donna knows the only way to improve is to train 
consistently and track her progress over time, constantly 
improving any issues. She wants to track her progress on 
her Android phone since she always has it with her. But she 
doesn’t like any of the apps she’s found. 



I just want a simple 
app where I can enter my 
time and notes. No bells 
and whistles! 



povw3 




i 




All of the apps she’s found 
are too complicated. 

She’s found lots of tracking apps, but 
they all use GPS, have subscriptions, or 
just make things too complicated. Donna 
asked you to build the simple time 
tracker app for her, and as a good friend 
how could you say no! 




& 
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Donna gave you this sketch for the time tracker app's time list screen. It's a pretty simple screen with the list of 
times and notes, just like she said. 



Emphasize -the "time ih 




Needs *bo be able 
•bo sdvoll vertically 
otitt tbev-e av-e -too 
many -ti^es -to -f it 
oy\ *tbe sCv-een 






But which View should you use to implement this sketch? 



L 



J 
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Plan the implementation 



You have a pretty clear sketch of the app to build, and now 
you need to decide how you’re going to implement it. You 
could create aLinearLayout and add Views dynamically 
based on the items to be displayed and then put that 
LinearLayout in a ScrollView. 




Hmm... I feel kind of 
uncomfortable about that. 
Wouldn't that mean quite a 
lot of repetition? 



He’s right. 

While that would technically work, it seems a little less 
than ideal. You’d be repeating the same layout over 
and over again in the list and you’d have to somehow 
synchronize the views on screen with the data stored 
in your Activity. But what’s the alternative? 




Geek Bits 



You can get a reference to a ViewGroup using findViewByld. Once you have 
the ViewGroup reference in code, you can programatically add Views to 
that ViewGroup at runtime. This isn't done in any of the book examples, 
but it can be really useful way to declare most of your layout in XML and 
add a bit of dynamic behavior. 
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YW& 



Wouldnt it be dreamy if there 
were a built in way to manage 
lists of information. But I know 
it's just a fantasy... 
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Use ListView 



ListView is a built in Android View that 
displays items in a vertical list. It has built in 
functionality for most of what you’d want a 
list to do- like automatically scrolling when the 
screen is filled with data, as well as a clean way 
to separate your data displayed in the list from 
the ListView itself 



The many pieces of a ListView 



You'll -fihd 
Listl/iews all over 
Android. Here s 
ah example ot a 
Lis-fcl/iew used in 
the About Phone 
screen -Prom the 
Android settings. 



ListView isn’t just a View, it actually 
a complete ViewGroup on its own. A 
ListView contains Views for each of the rows, 
which are then added to a single ViewGroup 
and added to the ScrollView so the list can 
scroll. And this is all done internally inside the 
ListView. The end result is that a ListView 
is a ViewGroup , not just a View. 



m if m 10:18 



Settings 



Wireless & networks 



_ 

C Call settings 
^') Sound 
0 Display 

IH Location & security 
0 Applications 



<Si 

Arronntc 9. ^vnr 



^ View -for 
cadh row 



The ViewGroup 
that will be added 
to the SdrollView 



^ Wireless and networks 
| Call settings { 




^ Location and security 
^ Accounts and sync 




The internal 
Serollf/iew to 
f support scrolling 
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Add a ListView to your screen 



Any ViewGroup (like a LinearLayout or the 
ScrollView, or even any View) can be added as the 
root element of the layout. And since you want to stretch 
the ListView fill the entire screen, the ListView is 
the one and only View you need in your layout. Add it to 
the layout in main . xml as the root View and adjust the 
width and height to fill the screen. 



The entire layout -for main. 
*ml, whidh is the layout 
-for TimeTradkerAdtivity 



c 



Don’t -forget to add the %mlns attribute sinde 
this is the root element of the layout 



<ListView 

xmlns : android="http : / / schemas . android. com/ apk/ res/ android 



android : layout-width="f ill_parent A 
android: layout -he ight="f ill_parent' 
/> 






make the Listl/iew 
stretdh to the edges of 
the sdreen, both vertidally 
and horizontally 





Tost Drwq 




The stvee* > s 
as V,as bee* 

added 7^ 



Run the app, and you’ll see an empty screen. 
This isn’t surprising since you added the 
ListView, but the the ListView has no 
data to display yet. 



Let’s add some data to the list! 
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lists are populated with data from adapters 



ListViews don’t actually contain any data themselves. 
That’s why you didn’t see anything on the screen for the 
first Test Drive. The ListView was in fact on the 
screen, but it was empty so the screen appeared empty. 

You can populate your ListView' s with using an 
Android Adapter. Adapter is an interface whose 
implementations provide data and the display of 
that data used by the ListView. ListViews own 
Adapters that completely control the ListView' s 
display. 




Adapters doivbrol the 
ton-tent displayed in the list 
as well as how to display it 



Communication methods 

The Adapter interface includes a number of methods 
to communicate data to the ListView. This includes 
methods to determine how many elements need to be 
displayed, and to retrieve specific items. 
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Control methods 

The Adapter interface also includes methods that 
control the display of that data like get View ( ) that 
creates and populates a View that is displayed in the 
ListView. 





Geejc Bits 



Android Listviews and Adapters are not clearly separated according to Model 
View Controller (MVC) lines. With MVC, you completely separate the data (the Model 
in MVC) from the display (the View in MVC) with communication facilitated by the 
Controller. However, Adapters perform Controller functions as well as some View 
and Model functions. This isn't a problem, and you can still properly organize and 
encapsulate your View and Model code. Just be aware that you won't always have the 
clear MVC separation you have in some other Ul frameworks. 
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Puild your own Adapter 

You can populate your list with data by building your 
own Adapter. Adapter is an interface and you can 
implement your own from scratch. 

Buy why build your own Adapter completely from 
scratch when there is a much easier way to go! Android 
provides an Abstract class called BaseAdapter 
that has most of the Adapter methods already 
implemented for you. 

Start by creating a new class in your project called 
TimeTr acker Adapter and make it extend 
BaseAdapter. 



TWTv-adkev- Adapter dass 
before implementing tbe 
abstv-afct BaseAdapter methods. - 




TimeTrackerAdapter.java 



tlierejare no 

Dumb Questions 




Do I have to use BaseAdapter? 



No, you can write your own Adapter implementation from 
scratch if you choose. 




When would I want to do that? 



There are a number of different reasons you may want 
to write your own. BaseAdapter handles a lot of the Adapter 
implementation for you, but if you want something custom or 
extremely optimized for your app, you may need to write your own. 




Is there any downside to writing my own Adapter? 



Writing your own Adapter is completely fine. But it does take 
some work to rebuild what you get for free with BaseAdapter. Plus, 
if you use BaseAdapter, the BaseAdapter implementation could be 
improved pver time. And if it is improved, you’ll get that benefit for 
free too. 




So is it a good idea to use BaseAdapter? 



For the most part, use BaseAdapter unless you have a good 
reason NOT to. 
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Implement the abstract methods 

Now implement the abstract 
Base Adapter methods. The easiest 
way to do this in Eclipse is to go to 
the Eclipse menu and select Source — > 

Override /Implement methods. 



TimeTrackerAdapter £la ss 
a-Pter implementing the 
abstract BaseAdapter methods. 



public class TimeTrackerAdapter extends BaseAdapter { 
public TimeTrackerAdapter ( ) { } 

public int getCountO { 1 

^ [ return -1 ; 



Ellipse will 
"Pill in auto- 
generated 
implementations 
like -these . 



public Object getltem(int index) { 
( return null; 



public long getltemld (int index) { 
\ return -I; ] 



public View getView(int index. View view, 
ViewGroup parent) { 

1 return null; 1 



Tbeire are three 
data related 
methods you need 
to implement 
i* BaseAdapter 
subclasses. 



There is just one view mthod 
you have to implement in 
BaseAdapter subclasses... 
the method that returns 
) the view used to display 
data in the List\/iew. 



t\*U foot I 
fublit-.- • 

J 



TimeTrackerAdapter.java 
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Building out the adapter 

Now you have a Base Adapter 
implementation, but it still doesn’t store 
any data for your list. It’s just filled with 
autogenerated methods that will compiles, but 
don’t do anything useful yet. 

Here’s what you;re going to do to make this 
adapter work for you! 



1. Create a data object 

Based on the app design, you’ll need to store a 
time and note for each time entered. Rather than 
separately storing that information, create a data 
object to store both fields in a single object. 




Create a data object tailed 
TWRetord -to sW mtormation 
-fov- a sfeti-fit en-teved 



l. Add an Arraylist of data objects 

Now that you have the data object for a single time 
record, add an ArrayList to store these data 
objects in your Adapter. 



Add an avvay ot 
Tin'e'redovd olojefrU 
-to -the Aadapfor- 




01 i i \ 5 4 




3. Complete the adapter methods 

Now that you have the ArrayList of your data 
objects, you can finish implementing the Adapter 
based on the data stored in the ArrayList. 



Co VY\ flete -the methods using 
■the new list o-f data objects 
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Create a data object 

Start by creating the data. Since it’s an object 
storing all of the information for a specific time, 
call it TimeRecord. It should have two variables, 
one for the time and one for the notes. Add a 
constructor, getters, and setters for both variables. 



a Reaps Bane 
Ope 



public class TimeRecord { 

private String time; 
private String notes; 

public TimeRecord (String time. String notes) { 
this. time = time; 
this. notes = notes; 

} 



public String getTimeO { return time; } 

public void setTime (String time) { this. time = time; } 

public String getNotesO { return notes; } 

public void setNotes (String notes) { this. notes = notes; } } 




TimeRecord.java 



+ g- 

Da this! ► 



Create the TimeRecord class 
in your project. Add the the 
code above to the new class. 
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c^Jharpen your pencil 



Below is the TimeTrackerAdapter code with the autogenerated methods Eclipse 
created when you implemented the BaseAdapter methods. Using the TimeRecord 
data object, complete the data methods getCount,and getltem (getltemld is done 
for you). You'll also need to create a collection to store these objects. 



public class TimeTrackerAdapter extends BaseAdapter { 



public TimeTrackerAdapter ( ) { 



} 



public int getCount ( ) { 

return -1; 



Add a dollettion to 
store TimeRedords as a 
member variable- 



} 



public Object getltem (int index) 
return null; 

} 

public long getltemld ( int index) 
return -1; return index; 

} 



This just needs to return a unique IP 
-for tbe data. And sinde tbe index- 
IP is unique -for a row, standard 
pradtide is just to return tbe index. 



public View getView(int index. View view, ViewGroup parent) 




TimeTrackerAdapter.java 
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Adapters Exposed 

This week’s interview: 

Combining your Data and Display: Good or Bad? 



Head First: Hi Adapter, thanks for joining us! 

Adapter: Always a pleasure. 

Interviewer: Let me get right down to business. 
Most user interface frameworks are pretty serious 
about very clear Model View Controller (MVC) 
separation, but not you. 

Adapter: What can I say? I’m a renegade. 

Head First: Aren’t you afraid the Design Pattern 

Police are going to come after you? 

Adapter: One step ahead of you! I was worried 
people would start clamoring about how I’m not pure 
MVC and all that, so I changed my name. I’m not a 
Model, Controller, View, or any combination of them. 
I’m my own Object. That’s why I’m called Adapter. 

Head First: Fair enough. Do you find it confusing 
to have all of that logic for data and views in your 
implementations? 

Adapter: Not really. Most of the time, the data I’m 
storing is directly related to me and why I’m on a 
screen in the first place. Maybe I’m displaying a list 
of States for selection in an Address entry process or 
maybe I’m displaying read only data like the times 
in the TimeTracker app. I can also be used as a 
navigation device with nested menus. Most of the 
time my data storage is pretty minimal and directly 
related to displaying it. Really, it just makes sense to 
keep it together. 



Head First: Sometimes it must get confusing though, 
right? 

Adapter: Absolutely! If I’m displaying a huge list of 
information that’s stored elsewhere (say in a database 
on the phone) I don’t want to bloat myself by storing 
that data inside me AND in the database. That would 
be wasteful. 

Head First: And what do you do then? 

Adapter: Well, there is nothing saying I have to store 
the data in me! I just have to facilitate providing that 
data to the ListView. I could easily lop off a piece of 
myself and turn that into a pure data source. As long 
as I have a reference to that new data source, I can 
ask it anything that the ListView asks me- how many 
rows, the data for a row and so on. 

Head First: I like the fact that you can still separate 
out your data and provide it to the ListView. That 
lopping off bit sounds painful though! 

Adapter: Oh, it’s not so bad. 

Head First: And there you have it. Adapter, the 
renegade MVC recluse, with the ability to control it’s 
own data and display. Thanks for joining us! 

Adapter: My pleasure! Thanks for having me. 
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Below is the TimeTrackerAdapter code with the autogenerated methods Eclipse created 
when you implemented the BaseAdapter methods. Using the TimeRecord data object, 
you should have completed the data methods getCount,and getltem (getltemld is 
done for you). You also should have created a collection to store these objects. 



public class TimeTrackerAdapter extends BaseAdapter { 

private /WayList<Tir*eRedord> -times — new /\rrayList<TimeRedord>0; 

public TimeTrackerAdapter ( ) { 



} 



public int getCountO { 

return -1 ; return timCS.sizeO; 

} 



A private /WayList dontaininj} one 
TimeRedord -for eadh row in the List\/iew. 



Sihde there is one TimcRedord tor eadh 
row, the si« of the Listl/iew is just the 
number of TimeRefiovds in the ArrayList- 



public Object getltem (int index) { 

return null; return getltem(inde*); 

} ^ 

public long getltemld ( int index) { 
return -1; return mde>c; 

} 



A$ai n, the one-to-one mapping keeps 
everything easy! The data tor a row 
at the index. is the Tir*eRedord in 
the /WayList at that same index.. 



public View getView (int index. View view, ViewGroup parent) { 



return null; 




TimeTrackerAdapter.java 
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What about getView? 

The data methods are complete now, but what 
about getView? The getView is the link 
between the data stored in the Adapter and how 
it’s displayed in the ListView. In the getView 
implementation, you’ll retrieve the data for the row 
from the ArrayList, populate a view with that data 
and return the populated view 



The inde* o( *the data ta 
display- This dovv-esponds ta 
•the indedes in *the av-vay lis*t 
TimeRedov-ds. 



public View getView ( 
int index. 

View view, < 



ViewGroup parent) 



The view -to 
populate the 
data in. 



Hold on a second. 

What view is going to be 
used here? Don't you have 
to customize one for time 
tracker data? 



O 



You’ll need to create a custom view 

You’re storing custom data for you app in the 
Adapter. That’s why you had to subclass BaseAdapter 
and create your own implementation. Just like 
storing your custom data, you also need to create 
your own custom views to display your data. 
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r — — — — — — — — — — — — — — — — — — — n 

, ADAPTER VIEW CONSTRUCTION , 

Before you can wire up the View to the TimeRecord in getView, you need to design it! Here is a sketch of the 
I layout for one row in the Listview. | 

| The entire dell is a I 




The widths are all set to F|LL_PAR£NT so they are as wide as possible- 
The heights are set to \MRAP__CONTfchlT so they dan resize based on dontents- 



L 



J 



there i£ffe no 

Dumb Questions 



How come all of the View height 
are set to wrap_content? 

First of all, if you set the height to 
filLparent, it will fill the whole list! That’s 
very bad! Likewise, setting the height to a 
fixed size would be a poor choice. The time 
is fixed in length to one line, but the notes 
could be several lines, but if you set the 
height of each View and the layout to wrap_ 
content, the cell will grow to fit the content 
and the row data will display correctly (and 
completely!). 



% We’re making a new layout here, 
can you have more than one layout per 
screen? 



Definitely. Up to now, you’ve had 
exactly one layout for each Activity (which 
maps to a screen). It doesn’t have to be 
that way! You can have as many (or as few) 
layouts per screen as you like. 



% That sounds kind of cool, when 
would I want to use a lot of layouts? 



Well, custom ListView rows are 
obviously one example but there are more. 
There is a really cool technique where you 
can use the <include> directive in one of 
your layouts. That takes another layout that 
you’re including and adds it inline making a 
big combined layout. It’s a really useful way 
to organize and encapsulate complicated 
layouts. We don’t have time to go over it 
in this book, but it’s definitely something 
worth checking out in the online Android 
documentation. 
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The steps to complete getView 

The getView method does some serious heavy 
lifting for the Adapter. It’s really the method that 
bridges the gap between the data and the display Not 
surprisingly, there are a few basic tasks you’ll need to 
accomplish inside every getView implementation. 



Instantiate the View 

The first time getView is called on your Adapter, 
the View passed in is null. Since the Adapter 
knows how the data should be displayed, it’s up to 
the Adapter to instantiate the View the first time. 
Successive calls to getView return the same View 
back to be repopulated with new data. Repopulating 
the same View instead of creating new Views for 
every cell is a performance optimization often used in 
user interface frameworks. 



In- Plate the 1/iew 




Retrieve the data 

The Adapter also contains the data. And the list 
index is passed into getView. You’ll need to 
correlate the index passed in to the ArrayList of 
Time Re cords. For this adapter, you have an 
correlated indices between the ListView and the 
TimeRecords in the ArrayList. 




Retrieve the 

selected data 



Set values on the view 

Using the selected Time Re cord, and the View, set 
properties on the view to reflect the data. In this case, 
you’ll be setting text in the view to display the time 
and the notes from a Time Re cord. 



Populate the view with 
the selected data 
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Create the new layout 

Now that you have a design for your view, it’s time 
to build it! Go to File — > New — > Android XML File 
to launch the new Android XML file wizard. 



Select the 
Tim eTradker 
projedt 

Call the layout 

time list item.*ml 



Seledt Layout as 
the resource type 



The /res/ layout -Polder 
viill auto-populate when 
you seledt Layout as the 
resource type 



New Android XML File 



New Android XML File 

Creates a new Android XML file. 






Project TimeTracker 
Tiie > timejistjtem.xml 



( Browse... ) 



What type of resource would you like to create? 

^ © Layout Q Values 

O Preference O Searchable 

What type of resource configuration would you like? 



O Menu 
O Animation 



O AppWidget Provider 




Available Qualifiers 






Chosen Qualifiers 


^Country Code 
liin Network Code 








f§ Language 
Region 
HiSize 








□i Ratio 




, V 




J Orientation 
Dock Mode 
A Night Mode 
Ejpp Pixel Density 
IjpTouch Screen 
[^Keyboard 
Hj[|Text Input 


▲ 






Navinatinn State 


▼ 






/res /layout 



Select the root element for the XML file: 



LinearLayout 



( Cancel ) (_ Finish ) 



LinearLayout will de-Pault as the 
root layout -for the K>ew layout )<ML 
-Pile, ^eep this selected sinde you II use 
LinearLayout -for your dell layout 



Clidk 

-finish 



j 
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* ^Mrpen your pencil 





Below is the timejistjtem layout code generated by the New 
Android XML File Wizard. Modify the layout to match the design 
you created for the list cell. 



<Linear Layout 

xmlns : android="http : //schemas . android . com/ apk/ res/ android" 
android : layout_width=" f ill_parent" 
android: layout_height=" f ill_parent " > 

</ Linear Layout> 




XML 



timejistjtem.xml 
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Below is the time_list_item layout code generated by the New 
Android XML File Wizard. You should have modified the layout to 
match the design you created for the list cell. 



<Linear Layout 

xmlns : android="http : / / schemas . android. com/ apk/ res/android" 
android : layout_width= M f ill_parent" 

android: layout_height= u d^idd^parefrh y — > u w\rap__ dohteht** ^ height "to 

wvap__dohteht so 
it wor/t -fill up the 



a hdroi d : o\ri eh tati on—” ve\r ti da I W > 



Make suv-e the 
layout is Vertical. 



whole list- 



<Text\/iew ar\droid-*id— ; $+id/ tih*e__view” 

ar\dv-oid : layout_width= 1,, 'fill - _pav , er\t w 



The -first Te*t\/iew 
-for the time- It has 
an IP -for adless latev* 
-from -fihdViewByld- 



Make the width as wide 
as possible but siz* the 
ahdroid^ayout^hei^ht— ”wrap__dohteht W height to the Content 

ahdroid'text£i«— w l0dp w ^ Make the text B l$( 

ahdroid'paddmgBotW— ^dp^ / > 

Add some padding on the bottom so there is 



some spate between the time and tbe notes 

<Text\/iew ahdroid^id— '$+id/ hotes__view” 

T » , _ , , ar\droid : layout width— W -Pill pareht” 

» he sedohd Textl/iew 1 



i-P -Por the botes. |t 
also has ah IP -Por 
addess latev- -Prom 

-Pihdl/iewByld- 



</L'meavLayout> 



Make the width as wide 

, . , I I 1 • .1 » , ,» , as ^t si« the 

andv-cMd-layoiAtJiei^ht- wrap_tontent height to the Content- 

ahdvoid-textSizje— w l 2-dp w / > 



Make the text small- 



Thd the layout- 




timejistjtem.xml 
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Topic Title Magnets 

Now that you’ve completed the View, you have everything you need to write 
the getview method. First you’ll need to check and make sure the View 
is not null, and if it is null, you’ll need to inflate it. Then you’ll retrieve the 
selected TimeRecord. Once you’ve retrieved it, you need to populate the 
view with the information from that TimeRecord. Complete the getview 
method using the magnets below. 



public View getview (int index. View view, ViewGroup parent) { 



return view; 



Y ouV" 



if (view == null) { | 



J 



Layoutlnf later inflater = 

| Layoutlnf later . from (parent . getContext ( ) ) ; 



TimeRecord ti me = times . get (index) ; I 
timeTextView . setText ( time . getTime ( ) ) ; ^ 



notesTextView7setText(timeTgetNotes7777^ 



TextView notesTextView = (TextView) 

view . f indViewByld (R . id . notes_view) ; 



view = inflater . inflate ( 

R. layout . time_l is t_i tern, parent, false) 



L 



TextView timeTextView = (TextView) 

view . f indViewByld (R . id . time_view) ; 
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Topic Title Magnets Solution 

With the View completed, you had everything you needed to write 
the getview method. First you should have checked that the 
View is not null, and if it is null, you should have inflated it. Then you 
should have retrieved the selected TimeRecord. Once retrieved, 
you should have populated the view with the information from that 
TimeRecord, completing the code with the magnets. 



public View getview (int index. View view, ViewGroup parent) { 



if (view == null) 






Layoutlnf later inflater = 

Layoutlnf later . from (parent . ge tContext ( ) ) ; 


view = inflater . inflate ( 

R . layout . time list item, parent, false); 



□ 



Cheek \( the View is 
null l-f it is, retrieve 
the layout in-Plater and 
inflate the view. 



“ ~7 “ v l The TimeRecord m the ArrayList 

TimeRecord ti m e = times .get (index) ; | ^ ^ ^ you 

need to populate the view. 



TextView timeTextView = (TextView) 

view . f indViewByld (R . id . time_view) ; 

timeTextView . se tText ( time . getTime ( ) ) ; 



For the time, get a re-Perenee to the 
time TextView and set the text to the 
time String -Prom the TimeRecord- 



TextView notesTextView = (TextView) 

view . f indViewByld (R . id . notes_view) ; 



notesTextView. se tText (time . getNotes () ) ; 



Vo the same process -Por the notes. 
£jet a re-PerenCe to the notes 
TextView and set the text to the 
notes String in the TimeReCord- 



return view; 



} 
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Connect the adapter to the ListView 

The Adapter is finished now, and the next step is to use 
the Adapter in the ListView. To set the Adapter on the 
ListView, you’ll get a reference to the ListView using 
findViewByld and call the set Adapter method passing in 
an instantiated TimeTr acker Adapter. 

Start by adding an android:id to the ListView in the layout. 




Q 



<ListView 

xmlns : android="http : / / schemas . android. com/ apk/ res/android" 
android: layout-width="f ill_parent" 

android : layout-height="f ill_parent" 

- fy ve the 

android : id="0+id/ times_list" | IS {. a * l( j. 

/> 



k) 

XML I 



main.xml 



Now get a reference to the ListView in onCreate, 
instantiate the TimeTr acker Adapter and configure the 
ListView to use it. 



public class TimeTracker extends Activity { 
TimeTr acker Adapter t imeTr acker Adapte re- 



public void onCreate (Bundle savedlnstanceState) { 
super . onCreate (savedlnstanceState) ; 
setContentView (R . layout . main) ; 



Instantiate the 
adapter. 



6jci a re-ferende to 

ListView listView = (ListView) 

I 

findViewByld (R. id. times_list) ; 
timeTrackerAdapter = new TimeTrackerAdapter ( ) ; 



listView. setAdapter (timeTrackerAdapter) ; 



Con-fi^uv-e the ListView 
to use the adaaptev. 




TimeTracker.java 
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Add test code to the adapter 

You custom Adapter implementation is now complete and 
being used in the ListView. There’s just one problem, the 
Adapter still doesn’t have any data in it. 

You’ve built the TimeRecords data object to hold times 
entered, and built the Adapter around an ArrayList of 
TimeRecords. So even if you 






Create a -Pew prepopulated 
TimeRedord objedts to see 
in tbe Listl/iew. 



public TimeTrackerAdapter ( ) { 

times . add (new TimeRecord ( 

"38:23", "Feeling good!")); 
times . add (new TimeRecord ( 

"49:01", "Tired. Needed more caffeine")); 
times . add (new TimeRecord ( 

"26:21", "I'm rocking it!")); 
times . add (new TimeRecord ( 

"29:42", "Lost some time on the hills, but pretty good.")); 






Add this test code 
to the constuctor of 

TimeTrackerAdapter. 



TimeTrackerAdapter.java 
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Tost Drove 



Now that the TimeTr acker Adapter is complete, connected to 
ListView and populated with test data, run the app again and 
make sure it all worked! 



The LisWiew 
has data! 



i 
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user review 



Forma's checking in... 

Donna’s really looking forward to using the app. 
So she stopped by to see how you’re doing. 




Next up, user entered times 

In this chapter, you created the new 
project, added a list, build your own 
adapter, custom views, and connected it 
all together. And great work! 

In the next chapter, you’ll be adding a 
second screen to this app, so your users 
can enter their own times. 

See you back shortly to add 
user entered times. 
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G® Off Piste 

With all of this work wrapped on Adapter, you’re ready to move on with this app. If 
you’re still wanting to learn more about Adapter and their Views, here are a couple of 
places to look. 



Prebuilt List \/ic>ws 

Although you built this list item view tvom 
sdvat^b, sometimes you dan use pvebuilt 
views, lake a look at the donstants m 
andvoid-R layout -Cov move imfovmation: 
bttf : / / developevandvoiddom/ ve'Cevende/ 
a^dvoid/Rlayout-btml. 



Built in Adap-tevs 

Tak e a look at these built in Adapter tor 
your apps. 

* Ada ^ with everything 
implemented to, you, just pass in an array/ 

® Sir»pleAdapte,: Adapter that uses data 
stored m X/WL (resources to build the list 

# ^Adapter.- An adapter- that uses 
m+ormat.on stored in a S^Lite database 
(you II learn more about these in a -few 
dhaptevs) 



you are here ► 



297 



CHAPTER 7 



Your Android Toolbox 




Now that you created an 
Adapter and list item View 
from scratch, you’ll be able to 
lists to all your apps. 



Us'm$ Lis-tViews 

9 Implement Adapter by subclassing 
BaseAdapter, writing your own, or usin^ a 
prebuilt Adapter. 

9 Create an list item View or use a built 
m M'\ ew- 

0 Populate tbe adapter with data. 

9 Con-figure tbe list to use your adapter. 




BULLET POINTS 



■ When working on a multi-screened app, 
always start with your post important use 
case. (Talk to your users to find out what 
they are!) 



■ Use Listview to display information in a 
vertically oriented list (with built in scrolling!). 



■ Fill your lists with data using Adapters. 



■ Start your custom Adapters 

implementations using BaseAdapters. 



■ Use Eclipse’s built in “Override/Implement 
Methods” option to add method stubs 

to your class for any interface your 
implementing (or abstract class you’re 
extending). 

■ If you build an Adapters that stores 
data, build your own data object to keep 
your data organized 



■ Add new layouts to your apps using the 
Android New XML File Wizard 



■ Inflate layout XML descriptions 
into instantiated views using 

Layoutlnf later . 
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Navigation in Android 





Eventually, you’ll need to build apps with more than one screen. 

So far, all of the apps you’ve built have only one single screen. But the great apps you’re 
going to build may need more than that. In this chapter, you’ll learn how to build an app with 
a couple screens, and you’ll create a new Activity and layout, which the Wizard previously 
did for you. You’ll learn how to navigate between screens and even pass data between 
them. You’ll also learn how to make your own Android context men- the menu that pops up 
when press the Menu button! 



this is a new chapter 



299 



the need for user entry 



Forma wants to enter her times 



Donna thinks the app is looking great, and 
she’s really looking forward to using it. But 
right now she can’t enter her own times. 





Let’s get right on it! 

The only thing stopping Donna 
from using her perfect new time 
tracking app is that she can’t enter 
her own times yet. Let’s build 
that now so she can get started 
tracking her times for her big race! 
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How is she going to add her own times? 

The list is displaying times, and you need to make 
a way to add times with notes inside the app. You 
could combine it all into one screen and have an 
entry section at the bottom, but that would get 
cluttered very quickly. 

The best way to do this is to add another screen 
specially designed for entering data. Here’s a 
quick sketch of what the new screen will look like. 
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Adding the entry screen 

There are a few steps you’ll need to take to make the new entry 
screen and connect it to the list screen. Here is what you’ll be 
doing in this chapter. 



1. Puild the new entry screen 

The new screen is sketched out, but you’ll have 
to build it. You’ll be making a new XML layout 
and a brand new Activity for the screen. 



You II build a new 
streen and an 
Activity "to display it 




Z. Launch the entry screen from the list 

The list screen is the main screen for this app and this is the 
screen that displays when you launch the app. You’ll add 
an menu with an Add’ menu item to this screen that will 
launch the entry screen. 



* rill i 10:04 



Users ean launch a 

time entry screen 
-from -the main time 
lis-t screen. 
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3. Return to the list screen from the entry screen 

Whether the user enters a new time or cancels out of the entry 
screen, they need to return the list screen when they are done. After 
writing the code to navigate to the entry screen, you’ll write the code 
to return back to the list screen with the user entered data. 






Time 




The user enters 
in-formation and 
presses Save- 



m ml i 10:04 

TimeTracker 

38:23 

Feeling good! 

49:01 

Tired. Needed more caffeine. 

26:21 

I totally rocked it! 

29:42 

Lost some time on the hills. But pretty good. 



4. display the new time in the list 

This is where it all comes together! After 
building the navigation back and forth from 
the entry screen, you’ll implement logic to 
store the newly entered time and display it 
in the list. 



The newly entered 
time in-formation gets 
added to the list. 




« ail i i 

TimeTracker 

38:23 

Feeling good! 

49:01 

Tired. Needed more caffeine. 

26:21 

I totally rocked it! 

29:42 

Lost some time on the hills. But pretty good. 

30 : 2.' 5 

Nice clean vun. Make swre not to slow down in -the 
second hal-f- 
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Create the new layout xml file 

Launch the New Android XML File wizard and create 
a new layout. Call the new layout add_time . xml. 

Here is the plan for the layout. You’ll create one vertical 
LinearLayout for the screen. This will have “Time” 
label, the text entry field to enter the time, followed by the 
“Notes” label and the notes entry field. At the bottom of 
the screen, you’ll have a horizontal LineatLayout with 
the save and cancel buttons centered. 
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Use EditText for text entry 

This is the first time you’re adding a text entry 
component to one of your screens. All of the 
other Views you’ve added to your screens have 
been read only But now you’re having users enter 
information, so they need an entry View. 

There is a special text entry View called EditText 
that you can use. It works just like a TextView, 
only it’s editable. From a layout perspective, just 
remember to give the EditText an ID so you can 
retrieve the View and it’s contents later on. 



Root vcvfcitdl Lmeav-Layout 
with the tw and notes 




You ean apply V/iev/ 
layout attributes 
to an EditText just 
like other V\ ev/s. 



there j are no 

Dumb Questions 



Q- The New Android XML File wizard is pretty cumbersome. 
Do I have to use it to make new layout XML files? 

No. The wizard is just creating the XML file and adding it to 
correct directory based on the XML type. It also tries to add a little 
structure based on your XML file type like adding the root element 
of a LinearLayout if your making a layout file that you’ve declared 
in the wizard to be a LinearLayout. 



% After all that time customizing layouts for different 
screens in the NASA app, how come we’re only adding one 
layout for this screen? 



Just like the NASA app, you would want to test this app on 
multiple devices of various screen sizes and customize the layouts 
as necessary for your supported device. 
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i 

#1 



ExeRciSe 



Below are magnets with the XML layout declarations for the views in your layout. Arrange 
the magnets to complete the layout XML. There is one main layout and one sublayout for the 
button bar similar to the one you made for the NASA Daily Image app. 



<EditText android: id="@+id/notes view" 

android: layout_width="f ill_parent" 
android: layout_height="wrap_content" 
android : gravity="top" 
android: layout_weight="l" 
android: layout_marginBottom="10dp" /> 

<LinearLayout 

android: orient at ion="horizontal" 
android: layout_width="f ill_parent" 
android : layout_height="wrap_content" 
android: layout_weight="0" 
android : background="#FF8D8D8D" 
android: gravity="center_horizontal" > 




<TextView android: text="Time 



android : layout_width="wrap_content" 
android : layout_height="wrap_content" 
android: layout_marginTop="10dp" /> 
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<EditText android: id="0+id/ time_view" 

android : layout_width="f ill_parent" 
android : layout_height="wrap_content" 
android : layout_marginBottom="10dp" /> 



<Button android : text="Save" 

android : onClick="onSave" 

android : layout_width="wrap_content" 

android: layout_height="wrap_content" /> 



<Button android : text="Cancel" 

android: onClick="onCancel" 

android: layout_width="wrap_content" 

android: layout_height="wrap_content" /> 



</LinearLayout> 



</ Linear Layout > 



CLinearLayout 

xmlns : android="http : / / schemas . android. com/ apk/ res/android" 
android: layout_width="f ill_parent" 
android: layout_height="f ill_parent" 
android : orientation="vertical"> 
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£oh£ ExeRciSe 
Solution 



Below are magnets with the XML layout declarations for the views in your layout. You 
should have arrange the magnets to complete the layout XML. There is one main layout and 
one sublayout for the button bar similar to the one you made for the NASA Daily Image app. 



This is -the layout voot, 3 vevtidally 
oriented LinearLayout (or the street*- 



<Linear Layout 

xmlns : android="http : / / schemas . android . com/ apk/ res/android" 
android : layout width="fill parent" 
android : layout height="fill parent" 
android: orientation="vertical"> 




The time V. 


CTextView android: text="Time" 




label- 


android: layout_width="wrap content" 
android: layout_height="wrap content" 
android: layout marginTop="10dp" /> 






<EditText android : id="@+id/time view" 






android: layout width="fill parent" 


The time TditText- 




android: layout height="wrap content" 


Notice it has a* IP 




android : layout marginBottom="10dp" /> 


-fov latev- retrieval. 


The notes 


<TextView android: text="Notes" 




label. I 


android : layout_width="wrap content" 
android: layout_height="wrap content" 
android: layout marginLef t="10dp" /> 






<EditText android : id="0+id/notes view" 


The notes 




android: layout_width="f ill parent" 


<1 — EditText- Notice 




android: layout_height="wrap content" 
android : gravity="top" 
android : layout weight="l" 
android: layout_marginBottom="10dp" /> 


it also has an IP* 
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The inner linear layout tor the button 
bar. It nas a yay batk$round and the 
gravity <s set to tentev-__hov-iz^>ntal so 
the buttons will be tent ered 



<Linear Layout 

android: or ientation="horizontal" 
android: layout_width="fill_parent" 
android : layout_height="wrap_content" 
android: layout_weight="0" 
android : background="#FF8D8D8D" 
android: gravity="center_horizontal" > 



The save a*d u*u\ 

buttons whieh 
both have ohCkk 
properties de-fihed. 
The methods will be 
•^plcmehted later. 



</ Linear Layout> I Ly button 

bar layout- 

— Ehd of the screen. 



</ Linear Layout > 



<Button android : text="Save" 

android : onClick="onSave" 

android : layout_width="wrap_content" 

android: layout_height="wrap_content" /> 

<Button android: text="Cancel" 

android: onClick="onCancel" 
android : layout_width =,, wrap_content 
android: layout_height="wrap__content" /> 
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Create a second Activity 

Now that you have the layout built for the entry screen, you 
need to display it in the app. So far, you’ve displayed a layout 
when an Activity is created, you’ve created optimized layouts 
that dynamically display for different screen sizes, and displayed 
layouts as part of a fragment. 

But now you’re making an entirely new screen with new 
behavior. What you need now is another Activity. Start 
creating a new Activity by adding a Java class called 
AddTimeActivity to your project that extends Activity. 




% 



tlierei^re no 

Dumb Questions 



I already have an Activity. Do I really need another one? 



In this case, yes. You could have displayed the new layout in 
the TimeTracker Activity, but that Activity has functionality specific to 
the list screen, like finding the list view in the layout and setting the 
adapter. If you just tried to display the entry layout in the TimeTracker 
Activity, the Activity would break when trying to find the list. 

O: When would be a good example of when I would have 
multiple layouts in one Activity? 

The layout optimizations you did in chapters 5 and 6 for 
different devices consisted of creating multiple layouts for one Activity. 
The key is that the functionality and behavior were the same. In the 
NASA app, once you had different behavior for the NasaEdNews, you 
had a second Activity. Just remember, same behavior, same Activity. 
Different behavior, different Activity. 




Create a new class called 

AddTaskActivity in your project. 
Make sure it extends Activity. 
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Below is the code for the AddTimeActivity class you just created. Complete the code 
below to display the screen. You’ll need to override onCreate and set the content view to 
your new layout. 



public class AddTimeActivity extends Activity { 



Ovm-ide o*Create here. f h 
that method, write the 
Code to display the layout 
Tor the add task seree*. 




AddTimeActivity.java 
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Emc'tSe 

§OLot»OH 



Below is the code for the AddTimeActivity class you just created. You should have 
complete the code below to display the screen. You should have overrided onCreate and set 
the content view to your new layout. 



public class AddTimeActivity extends Activity { 

publid void ohCvca-tc^Buhdlc saved InstandeState) { 

powt -forget _v ; suPev-.or\Cvea*tc^saved|r\stahdeS*ta'tc); 

to tail supev- 

se*tCor\'ter\'t\/iev/(R.layou't.add_'time); 

} 



AddTimeActivity.java 



Call setCor>tefit\/iev/ 
with the R do»sta*\t 
*fov- the layout you just 
wv-ote to set the sdv-ee*. 





Don’t forget to call super.onCreate() 

The Activity base class has logic needed to 
properly instantiate and configure an Activity 
for use by the Operating System. If you 
override one of the lifecycle methods, be 
sure to call super. If you don’t you’ll get a nasty runtime 
exception and your activity won’t run! 



Watch it! 
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This looks good, but 
something tells me I 
should keep jogging 
and come back later. 



There’s work left to do, but you’re 
getting there! 

So far, you’ve built the layout for the new ttime 
entry screen and the Activity to control the 
screen’s behavior. 

Now it’s time to navigate to the new entry 
screen from the list. 







Think about different Android apps you’ve 
used and how you navigate around them. 
How would you build the navigation to 
the Add Time screen in this app? Write 
your answer below. 
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Use an Option Menu 

With the layout built and a new Activity created for the 
Time Entry screen, it’s time to navigate to it. There are a few 
different ways you could implement the navigation including 
putting a button on the screen or using an options menu. 

The options menu is the popup that displays when you press 
the Menu button on an Android device (or the on screen 
menu button on a tablet). The options in the menu are 
controlled by the Activity in focus when the menu button is 
pressed. 

Let’s add an options menu item to launch 
the time entry screen. 



Options mem hidden 




The lis-t screen remains unchanged 
when hhe menu is no-t open... 



Options menu showing 





...bu*t when "the menu button is pressed* 
-the menu will show w'rth one button “Add 
vuhidh will laundh “the Add Time sdreen. 
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Create the menu XML file 

Menus are defined in XML just like layouts 
and many other Android resources. Just like 
layouts, you can create new menu XML files 
using the New Android XML File wizard. 
Only this time instead of selecting layout 
options, select menu options. 



Seledt the 
TimeTradkev- 
projedt- 



Call the 

time list menu.%m|. 



New Android XML File 



New Android XML File 

Creates a new Android XML file. 




Project TimeTracker 
File 



ti mej i st_m e ri u . x m I 
What type of resource would you like to create? 

0 Layout 0 Values 

0 Preference Q Searchable 

What type of resource configuration would you like? 




Seledt Menu as the 
resourde type- 






Browse... j 



0 Menu 
0 Animation 



0 AppWidget Provider 



The /res/menu -Coldev- 
will auto-populate 

when you select Menu * FSide^' /res/menu 

as the vesouv-de type 





5elect the root element for the XML file: 



/Wchu will be selected 
the dropdown. 

The dropdown iwill 
be disabled sinde 
^Chu is the only 
Possible root element 
Tor a menu resourde. 



^ Cancel J : ^ Finish j 



■f 






Cl'itk tm'ish- 
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Add a menu option 

The menu you just created with the wizard 
will be in your project under the res / menu 
directory Navigate to that directory in the 
Eclipse Package Explorer open it. 

Just like the graphical layout editor, there is a 
graphical editor for creating menus. Start by 
clicking add to add a new menu item. 



' W Android Menu 

Ucnu Elements 



Clitk add 




Create a new element at the top level. 



Select item. 



[c]Group~ 
> CO Item 



Cancel ^ f OK 



Pvess OX- 



Now you can configure the new menu item 
by setting the title and ID. 
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Show the menu 

Just like XML layouts, the menu is defined in 
XML, but you need to display it from your Activity 
The Activity base class includes a method called 
onCreateOptionsMenu that is called on the 
displayed Activity when the menu button is pressed. 
The default implementation does nothing, but you can 
override it and display your custom menu. 



public void onCreateOptionsMenu (Menu m) { 

super . onCreateOptionsMenu (m) super. 

Menulnf later menulnf later = getMenuInflater () ; 
menulnf later . inflate ( 

R . menu . time_l i s t_menu , menu ) ; 

ImPlate "the menu you de-Pined in 
time_Jist_menu passing in the R -Pile 
re-Peren£e u -the menu description- 



Call Activities method, 

getMenuln-PlaterO to 
retrieve the Menu|n*Plater. 




Notice that onCreateOptionsMenu uses an 
Inflater, just like when you inflated the list item layout 
in the list adapter. The Menulnflater takes a 
menu defined in XML and creates men items. The 
only difference is that a default menu is passed in to 
onCreateOptionsMenu and the menu items defined 
in the XML file are added to that menu. . 

The menu 

)<ML 



XML 



TimeTracker.java 



The menu populated 
With your eustom 
menu items 



The Menu In-Plater 




n 


i r 1 


V - 


1 
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Tqst Drwq 



Run the app, and press the menu button when the time list 
appears on screen. You should see the menu display with 
one single item “Add”. 




And the menu 
will display. 



menu 
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Capture the menu action 

There is a companion method to 
onCreateOptionsMenu method called 
onMenuItemSelected which is called 
when a menu item is selected by the user. 

To make the menu item work, override 
onMenuItemSelected, check which menu 
item was selected and invoke your action. 



Ovevride 




You can add your code to process the menu item TimeTracker.java 

inside the if block testing for your menu item. 

Now you have two independent Activities, and 
a menu item with an action that can move from 
one to the other. 



Now turn the page to see how to launch new screens 



► 
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starting new screens with intents 



Use Intents to launch new screens 

You can launch new screen using an abstract object 
representation of an action called an Intent. You can 
create an Intent when the Add menu item is selected 
pointing to the AddTime Activity. 



/ 



£ rill a 7:03 



TimeTracker 



Tired. Needed more caffeine. 



I totally rocked it! 



Lost some time on the hills. But pretty good. 



ill 



m 




The intent v-e-Perenee 
•the AddTime Activity. 

4 

^3 



AddTime 



Selecting -the add menu 
item Creates an Intent 



Then you can call a utility method on the current 
Activity called startActivity passing the Intent. 
This starts a new Activity in your app, managing all of 
the lifecycle methods for you including stopping the old 
Activity as well as creating and startng the new Activity. 



The new 
Activity 
gets 
started. 




The intent re-Perending 
the new Activity 




startA^tivityO 




Save 



Cancel 
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Launching a new Activity Magnets 

Below is the empty onMenuItemSelected method in the 
TimeTracker Activity. Complete the method by creating and 
invoking an Intent to launch the AddTime Activity Even though 
you only have one menu item right now, check and make sure that 
the ID of the menu item passed in to onMenuItemSelected is the 
add action. Pass the onMenuItemSelected call to super if you 
don't process the action. 



public boolean onMenuItemSelected (int featureld, Menultem item) { 



} 



TimeTracker.java 




Intent intent = 


new Intent (this, AddTimeActivity . class) j 




return true; 




if (item . getl temld ( ) == R.id.add_time_menu_item) { ~| 



startActivity (intent) 



return super . onOptions I temSelec ted (item) ; 
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Launching a new Activity Magnets Solution 

Below is the onMenuItemSelected method in the TimeTracker Activity. 

You should have completed the method by creating and invoking an Intent to 
launch the AddTime Activity Even though you only have one menu item right 
now, you should have checked and made sure that the ID of the menu item passed 
in to onMenuItemSelected is the add action. You should have also passed the 
onMenuItemSelected call to super if you don't process the action. 



public boolean onMenuItemSelected (int featureld, Menultem item) { 

Check -the item IP t o see i-P 
•the add action was selected 



if (item.getltemldO 



R. id. add time menu_item) 



{ 



Return true 
to indicate the 
select event 
was processed- 




Intent intent = new Intent (this, AddTimeActivity . class) ; 



startActivity (intent) 



return true; 



Create and new intent to 
select AddTimeActivity 
and then start it 



return super . onOptionsItemSelec ted (item) ; 

V Pass the Call on to super 
-for any menu items that 
may be in the menu- 



TimeTracker.java 
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Open AndroidManifest.xml 

Every Activity you use in your app has to be declared in 
your AndroidManif est . xml file. When you created 
your app with the wizard, it created the Activity for you 
and added an Activity element in the Android Manifest file. 

Before you test the app, add the new Activity declaration to 
your manifest file or you’ll get a nasty exception! 



<manif est xmlns : android="http : / / schemas . android . com/ apk/ res/ android'' 
package="com . headfirst labs . time tracker" package *dme -for 

android: vers ionCode="l" 
android : versionName="l . 0"> 



yowr application 



Application android: icon="0drawabie/ icon" android: labei="0string/ app_name"> 

The an<Wid:name points to the Activity dlass, by appending the 
package name to the 3ndvoid : n3me- So in this case, .TimeTVadkev 
becomes "com.head-fivstlabs.timetvackevTimeTvaekev'' 



\ 



The label is -the text that displays 
under the iCon on the home screen 



This Configures 
the application 
to be launched 
firom the home 
screen. 



<activity android : name=" . TimeTracker" 

android: label="0string/ app_name"> ' 

<intent-f liter > 

<action android: name="android. intent . action .MAIN"/> 
<category android : name="android . intent . category. LAUNCHER"/> 
</ intent-f ilter> 

</ activity> 

</ application> 



The package name is appended to the android-name, so you 
just ^ccd to enter the class name here- which will give you 
f ^Hy ^ali-fied class name fi>r the AddTimeActivity- 



<activity android : name— ” AddTimeActivity w > </ activity> 

The activity declaration 
•for the AddTimeActivity- 



</manifest> 



XML 



AndroidManifestxml 
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Tqst Drws 



You’ve got the new screen built, the Intent starting the new 
Activity from the menu and the new Activity configured in 
the Manifest. Go ahead and run the app and test out all 
your hard work! 



TimeTracker 

38:23 

Feeling good! 

49:01 

Tired. Needed more caffeine! 
26:21 

Lost some time on the hills! 

29:42 

Yeah baby! Joe's going down! 




fflD ® 8:20 



Me 8:17 pm ^ 




Clidk in these -fields 
and you’ll see the 
on sdveen keyboard 
auWatidally popup. 



Perfect! The 



new screen looks great! 



324 



Chapter 8 




multi-screen apps 



Bacfc ^tacjc Up Cl«se 



As you test the app, you’ll pretty quickly realize that the save 
and cancel buttons don’t work. But even without implementing 
these buttons you’re not stranded on the new screen. Press the 
back button and you’ll go back to the list screen automatically. 




5554:standard 




Pvess -the badk button 
and you'll 50 badk to 
tbe list sdveen- 



Wait, how did that work? 

Android maintains a stack of Activities your app has started, 
beginning with the first Activity in your app. As you start 
new Activites like you did with the time entry screen, it’s 
automatically added to the back stack of Activities. And when 
you press the back button, it automatically goes back to the 
previous Activity in the stack which in this case is the list screen. 
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Implement the button actions 



The back stack and the back button do allow 
one way to navigate back to the list screen from 
the time entry screen, but it’s not the behavior 
you’re looking for. You have the Save and 
Cancel buttons on screen, and you need to 
make them work. 



Let’s start with the Cancel button. It layout 
declaration for the button specifies anonClick 
method called onCancel. You could follow the 
same pattern you used to launch the time entry 
screen and create a new Intent pointing to the 
TimeTracker Activity and starting that Intent. 



The £an£el buttons onClidk 
parameter is domfijured -to 
tall a method ealled ohCaheel. 
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Put there's a problem... 



Every time you start an Activity Android 
automatically adds it to the back stack. If you 
always start Activities to navigate between 
different screens, you’re going to end up having 
a huge back stack! 



© 



Q When the opp 
starts, the 
screen stack 
only contains 
the TimeTracker 




© 



When a user presses the 
Add item, the AddTime 
Activity is started, adding 
it to the screen stack. 



k 



\ 



AddTime 

Activity 




Cancel starting another 
instance of the 
TimeTracker Activity 
adds it to the screen 
stack a second time. 




A 

Theme ame -two 
TimeTmadkem 
ins*tandes in 
the stadk| 



Take control of the back stack 

There are a few different ways to control the 
back stack. One technique you can use is to call 
finish on the current Activity to end it. This will 
remove it from the back stack and automatically 
navigate to the previous screen in the stack. 



1 

AddTime 




Call -finish on *thc 

AddT'imcAd'tWi'ty. 



finish () 




AddT'irwC is -f inished 
of-f -the s*tadk. 



TimeTmadkem is au-fcoma-tidally 
displayed and pressing badk button 
-fv-om heme will e*rt -the app. 
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Implement cancel using finish 

If you implement onCancel using finish, you’ll 
remove the intent and the startActivity 
call and replace it with a call to finish. This will 
stop the AddTime Activity, remove it from the 
stack and return the user to the list screen. 




What about the save button? 

This implementation will work for the Cancel 
button, but what about the Save button? The 
Cancel button just needs to return to the list 
view, but the Save button needs to return to the 
list view and return the user entered data. 



Call -finish on •the 




AddTime is -finished 
o£f *the static 



TimeTracker is automatically 
displayed and pressing back button 
-from here will e*it the app. 
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Wouldn't it be dreamy if you could 
handle the save and cancel button the same 
way, just returning data when you save? But 
I know it's just a fantasy... 



you are here ► 
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Use startActivityForResult 

There is a mechanism built into Android for launching a new Activity for 
a result, which is exactly what the TimeTracker is doing by launching the 
AddTime. The key difference is that the new Activity is started using a 
special call, startActivityForResult. And when the new Activity is 
finished, a method called onActivityResult is invoked on the calling 
Activity with the resulting data. 

Here is the flow between the two Activites 



TimeTracker 






% 



/ Activity 
( Started 



T 



s tar tAc ti vi tyForResul t 




\ 



This replaces the call 
to start Activity. 



VVhen the activity started 
usin^ startAttivityForResult ,s 
finished, this is automatically 
called with the result data- 



onActivityResult 



The request tode is 
used to link responses 
to requests. 



request code 



Pa-ta patkayd ke-fov-e the 
AddT.meActivity finished- 




result data 



AMTime 



/ \ 

. I Activity 

I Started . 

\ / 




J 



iVhen *the 
user presses 
<T~ save, the 
Activity 

patka^es 
up the user 
entered 
data and 
tails -f inish 
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Update starting the Activity 

The startActivityForResult will work for 
both the Save and Cancel flows. Before implementing 
the save functionality, let’s go back and update the 
Save flow to use startActivityForResult. 

One difference between startActivity and 
startActivityForResult is that but you need 
a request code. This request code is passed back in to 
the calling Activity when onActivityResult is 
called so the you can correlate the responses to the 
screens you’ve started. 



public static final int TIME_ENTRY_REQUEST_CODE = 1; 



The (request Code 
Constant- 



Now remove the startActivity call and instead 
call startActivityForResult passing in the 
intent and the request code. 



public boolean onMenuItemSelected ( int featureld, Menultem item) { 
if (item. getltemld ( ) == R. id. add_time_menu_item) { 

Intent intent = new Intent (this, AddTimeActivity . class ) ; 
startActivity (intent ) ; 

startActivityForResult (intent, TIME_ENTRY_REQUEST_CODE) ; 

Pass m "the tiw'C entry 

vcc\ucs*b to&t Constant 

} 



Replace -the stav-tActivity tall with 
3 ca II to stavtActivityForResult- 

return true; 




TimeTracker.java 
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Implement onSave 

The Cancel flow looks great, so let’s move on to the Save 
flow. You’ll start by implementing the onSave method 
invoked by the Save button when clicked. You’ll implement 
this method in the AddTime Activity. 




that invoked the AddTime is going to be returned to the 
TimeTr acker Activity. So you can put these values in 
a Map inside the Intent. Then you can retrieve those 
values from the Intent in the TimeTr acker Activity. 



Add the user ehtered 
values -fov -time and notes 
into the calling intent- 




332 



Chapter 8 



multi-screen apps 




onSave Magnets 

Below is the empty onSave method from the AddTime Activity. 
Use the magnets below to complete the method. You'll need to 
retrieve reference to both EditTexts as well as the Intent. Then 
use Intent's putExtra method to add values to the Intent's Map so 
that you can retrieve them later from the TimeTracker Activity. 
Finally set the result of the Intent to RESULT_OK which you'll use in 
the onActivityResult method to determine whether the Save 
or Cancel button was pressed. . 



public void 



onSave (View view) { 



} 



intent . putExtra ("notes " , notesView . getText ( ) . toString ()) ; 



EditText notesView = (EditText) f indViewByid (R. id. notes_view) ; 


j 




intent .putExtra ("notes", timeView . getText ( ) . toString ()) , 












EditText timeView = (EditText) findViewByid (R. id . time_view) ; 




AddTime.java 



this . setResult (RESULT_OK, intent) ; 



finish ( ) ; 



Intent intent = getlntent(); 
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onSave Magnets Solution 

Below is the onSave method from the AddTime Activity. You should 
have used the magnets below to complete the method. You should have 
retrieved references to both EditTexts as well as the Intent. Then using 
the Intent's putExtra method, you should have added values to the 
Intent's Map so that you can retrieve them later from the TimeTracker 
Activity. Finally you should have set the result of the Intent to RESULT_OK 
which you'll use in the onActivityResult method to determine 
whether the Save or Cancel button was pressed. 



public void onSave (View view) { 

, Callii* getlntentO retrieves -the 

| Intent intent = getdn/ten^ starting intent -Pror* a running Activity- 

a veWnfce -to the time £ditTe*t, and put 
its value in the intent usinj the string donstant- 



EditText timeView = (EditText) findViewByld (R. id. time_view) ; 


□ 


intent . putExtra ( "time" , timeView . getText ( ) . toString ()) , 


' 



^et a re-P erende to the notes £dit7e*t, and put 
its value in the intent usinj the string Constant- 

EditText notesView = (Edit Text) f indViewByld (R . id . notes_view) ; 
intent . putExtra ("notes" , notesView . getText (). toString ()) ; 



this . setResult 
finish ( ) ; 



(RESULT_OK, intent) ; 



Finish the activity- 



j 



Set the result to 0\C and 
pass in the intent- 




AddTime.java 
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Implementing onActivityResult 



You’ve completed the on Save method, which 
packages up the user entered data in the calling 
intent. It also calls finish on its Activity which 
pops that Activity off the stack and returns 
to the TimeTr acker Activity, calling its 
onActivityResult method. 



1 



Finish gets tailed, tompleting 
the Activity and removing 
itsel-P -from -the statk. 



finish () 



Then onActivityResult gets tailed 
in TimeTratker with the Intent 
dontaining the result data. 

onActivityResult ( ) 




In the TimeTracker onActivityResult 
method, you’ll retrieve the values from the 
Activity using the getStringExtra method, 
using the map keys used to add the values. Then 
you’ll create a new TimeRecord object with 
the values and add it to the List Adapter. 



Create a new TimeRetord 
objet-i with the data -Prom 
the result intent- 




Add the new 
Timeretord to 
the list- 



result data 
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Paa] Puzz]e 



Your job is to take the code fragments 

from the pool and place them into the 
onActivityResult method. You 
may not use the same code fragment 
more than once. Your goal is to make 
a new item display in the list.. 



protected void onActivityResult (int requestCode, int resultCode, Intent data) { 



if (requestCode == TIME_ENTRY_REQUEST_CODE ) 
if (resultCode == RESULT OK) 




^ — This £he£k makes sure -the requestCode 
is -the £ode you passed in 

This ehetks -that the resultCode is 
RKULTJ)^. Sinte you didn’t set the 
vesult tode in the onCantel, this will return 
instead o-f trying to add d new item* 



} 



Note: each thing from 
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Intents Bxposei 

This week’s interview: 

Are Intents Under Appreciated? 



Head First: Hi Intent, thanks for speaking with us 
tonight. 

Intent: Happy to be here, try and tell my story a 
little bit, you know. 

Head First: Wow, your story? Sounds like you have 
something on your mind. What’s up? 

Intent: It’s nothing new really. I just don’t get a lot 
of respect around here. I mean, I can do an awful 
lot! I help start Activities, I let everyone know where 
to go, and I can store and communicate data myself 
as I move around the system. 

Head First: That all sounds right. But it sounds like 
you’re not too happy about it. 

Intent: I feel bad coming here and complaining, 
but I just never get to see the spotlight you know? 
Activities get to interact with users! I just have to 
hang out in the background while they get to shine 
on the screen. 

Head First: It must be awful for you to just sit 
there while the Activities are out there displaying 
themselves to users, getting their buttons pressed... 

Intent: Hey! You don’t have to rub my face in it, 
Okay? 

Head First: Oh, I’m sorry, I didn’t mean... 

Intent: It’s Okay. I’m used to it. 



Head First: No, I’m telling you that you are really 
important. You may be sitting in the background 
while the Activity is displayed, but you have to keep 
track of really important information . You know 
how the Activity was launched, and you include any 
information passed in to the Activity. 

Intent: That ’s true... 

Head First: And as you’re sitting there in the 
background while the Activity is displaying, you get 
asked for your information and new information gets 
passed to you. Like when information is added to 
you to get sent back to a calling Activity after calling 
startActivityForResult. 

Intent: That ’s true too. 

Head First: I think you need to change your 
mindset. You’re not under appreciated, you’re the 

strong silent type. 

Intent: The strong silent type... I think I like the 
sound of that. 

Head First: Glad you’re feeling a bit better. That’s 
all the time we have tonight folks. Give Intent a 
big round of applause before going back into the 
background and we forget about it! 

Intent: Hey now! 

Head First: Kidding, man. Kidding. 
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Pool Puzz]e §®]ufion 

Your job is to take the code fragments 

from the pool and place them into the 
onActivityResult method. You 
may not use the same code fragment 
more than once. Your goal is to make 
a new item display in the list. 



protected void onActivityResult (int requestCode, int resultCode, Intent data) { 
if (requestCode == TIME_ENTRY_REQUEST_CODE) { 
if (resultCode == RESULT_OK) { 

String notes = data . gets tringExtra ("notes") ; 

String time = data. gets tringExtra ("time") ; 



6\c t the values 
-from *t^e intent 



Create a new 
Ti meReeord and add 
it to the list adapter. 



timeTrackerAdapter . addTimeRecord ( new TimeRecord ( time , 



notes) ) 



timeTrackerAdapter . notif yDataSetChanged ( ) ; 

This method lets the 




k«o*/ the data has thawed 
and to update the display- 



Note: each thing from 
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Tqst Drove 



Everything is all wired up! Run the app and run through the complete 
flow of adding a new time. Invoke the Add menu item, enter a time and 
some notes, and press save. And you’ll see a new item added to the list! 



"the bu*t‘(joh 
and select the Add 

menu item. 



TimeTracker 



Feeling good! 




Mil 1 9:12 



Tired. Needed more caffeine. 



I totally rocked it! 



Lost some time on the hills. But pretty good. 



My best run yet! 



Pv-ess save - 



Fantastic Work! 
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G# Off Piste 

You just did some seriously heavy lifting to get data entry working. Can’t get enough? 
Here are some more features you could implement to make the app even better! 



Build ed'rt and delete 

I* this dhapter, you built a 
medhanism to add items to the 
list.. But v/hat if a user enters the 
wron<j information? Allowing users to 
add information is <)reat> but your 
users v/ill eventually want to be able 
to edit and delete as well. 



L/Ulld <3h dbotrfc, s£v*eeh 

The bulk of ihe navigation in this 

chapter used startActivityForResult 

to manage data entry. Try building 
pother scree,, like a, about screen, 
that displays but doesn't return 
data to the calling Activity. Think 
about whether you want that 
Activty to be in the back stack and 
build it addordin^ly. 
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Your Android Toolbox 



Now that you’ve built 
navigation between two 
screens, you can apply the 
same logic to building navigation 
between as many screens as you like! 
Just not too many, OK? 



Sdveen Navigation 

, &e»t* a »» 7 u ^' '*** * 

to use a view Layout 

o Create an Intent 

o Call startAetwity or 
startAetWityforResult to laundh a 






sCree* 



New Menu Steps 

* 2 ^ a «» *«- ft t ^ tt, *» 

aML +ile wiz^d 

O Add menu items using the graphical 
editor, or edit the raw )</l/]L. 

o Inflate the menu using the Menufn-Plater 
'» the onCreate^ptionsAIenu method in 

your Aciiv'riy 

9 P'rodess the menu adtion in 
on/Wenu|temSeledted in your Adtivity. 




BULLET POINTS 



Create new Layouts using the new XML file 
wizard, or by creating the XML files yourself. 



Reuse Activities with different layouts if 
the behavior is the same. If the behavior is 
different, create a new Activity. 



Remember to add a declaration for your 
new Activity in AndroidManifest.xml. If you 
don’t you’ll get nasty errors! 



To launch a new Activity in your 
app, create an Intent and pass it to 

st art Activity. 



If you’re staring an entry screen, use 
startActivityForResult to 
easily finish and return values to the calling 
Activity. 



Implement onActivityResult to 

receive the data returned from the screen. 



Create new Context Menu XML descriptions 
using the new XML file wizard. 

Show menus by overriding Activities 

onCreateOptionsMenu and 

process the selection events by overriding 

onMenuItemSelected. 



New screens are automatically added to the 
back stack. The back buttons uses this back 
stack when pressed. 

Call finish to complete a screen and 
automatically display the previous screen on 
the back stack. 

Use EditText for text entry 
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Store your stuffy 




In memory data storage only gets you so far. in the previous chapter, 

you built a list adapter that only stored data in memory. But if you want the app to 
remember data between sessions, you need to persist the data. In this chapter, you’ll 
learn to store your data using a SQLite database. You’ll learn how to create and manage 
your own SQLite database and you’ll learn how to integrate that SQLite database with the 
ListView in the TimeTracker app. And don’t worry, even if you’re brand new to SQL, you’ll 
learn what you need to get this app’s database up and running. 



this is a new chapter 
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data isn’t saving 



Uh oh, the times aren't saving... 

Donna is loving the app so far. It’s a 
straightforward app where she can enter her 
times and notes. And just like she wanted, 
it’s free of clutter from features she won’t use. 



But she pointed out a really big problem. 
When she closed the app and later reopened 

it, all of her times were gone! 




Viewing and entering 
times looks great. But 
the app is useless if I 
can't save times! 
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... but you can save them using SQlite 

The app currently loses all of the information 
added to list when you exit and relaunch the 
app. This is because newly entered times 
are stored in memory as objects inside the 
TimeTr acker Adapter. And once you shut 
down the app, the in memory data is gone! 



The Listl/iew 
-for your app. 



jL ill ft 10:04 

TlmeTracker 

38:23 

Feeling good! 

49:01 

Tired. Needed more caffeine. 

26:21 

1 totally rocked it! 

29:42 

Lost some time on the hills. But pretty good. 







The Adapter -for 
your list is storing all 
-the data in memory. 



Android comes standard with a built in SQLite 
database implementation. SQLite is a lightweight SQL 
database implementation that stores data to a text file 
on the device. If you store the times in the SQLite 
Database and read them back in after you restart the 
app, you’ll have persistent data. 



Persist *the list data in the 
£$Lite database and display the 
data -from the database and you I 
have persistent data storage. 




you are here ► 
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Storing times in the database 

You’ll have to touch several parts of the app 
to get database storage fully integrated. Let’s 
take a look at what you’ll be doing in the 
chapter to seamlessly persist data. 



1. Create a database for your app 

You’ll be storing the time and note data in a SQLite 
database. But before you can store data in the 
database, you have to create it. 




SQLite 



^ — - Your new 

database 



Z. Save a time record 

Once the database is created, you can save times in 
it. Here you’ll define the database schema based on 
the data you’ll be saving. Then add the code to insert 
records directly into the database. 




3. Load time records 

It’s no fun to store data if you can’t access it. Here 
you’ll write the code to query the database and 
process the results. 




Record 



4. Update the List to use the database 

The goal is not to save and load data from a 
database in isolation. The goal is integrate database 
persistence in the existing app. With store and 
retrieval working, you’ll finish up by integrating all 
of your hard work back into the TimeTracker app. 



Display those -times 
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Start by creating the database 

You can create and open databases directly inside 
your app. The best way to get off the ground with 
a new database is to extend a built in abstract base 
class called SQLiteOpenHelper that provides 
you with all of the basic behavior to manage a 
database. 

Create a new class called 
TimeTrackerOpenHelper that extends 
SQLiteOpenHelper. There are three methods you’ll 
need to implement that descrive how to connect to 
your database, initially create tables, and upgrade 
from previous versions. 




Create a new class called 
TimeTrackerOpenHelper 
that extends SQLiteOpenHelper. 
Pass the database name and 
the database version to super. 
Make empty implementations of 
onCreate and onUpgrade. 



I 

private static class TimeTrackerOpenHelper extends SQLiteOpenHelper { 

TimeTrackerOpenHelper (Context context) { 

super (context, "timetracker . db", null, 1); 

^ ^ ss ”^be name o-P -the , Y' pa $s -(^e vevsi on number 

database to sup er to supev - a s well. 

public void onCreate (SQLiteDatabase database) { 

Create your -tables in here 

} 



public void onUpgrade (SQLiteDatabase database, 
int oldVersion, int newVersion) { 




Handle database sebema upgrades in here 



TimeTracker 

OpenHelper.java 
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Instantiate the OpenHelper 



The database is created internally by 
the Open Helper when it is instantiated. 
In TimeTr acker, add the following 
line creating an instance of the 
TimeTr acker OpenHelper. 



-A v 

Jjo thhf 



Add the line to instantiate the 

TimeTrackerOpenHelper in 
theTimeTracker onCreate 

method, then start the app. 



public void onCreate (Bundle savedlnstanceState) { 
super . onCreate (savedlnstanceState) ; 
setContentView (R . layout . main) ; 

ListView listView = (ListView) findViewByld (R . id . times_list) ; 
timeTrackerAdapter = new TimeTrackerAdapter () ; 
listView . setAdapter (timeTrackerAdapter) ; 



TimeTrackerOpenHelper OpenHelper = new TimeTrackerOpenHelper (this) ; 

Instantiate youv twst»» 
open helper -will tause the 
database to be treated- 



TimeTracker.java 




tfierejUre no 

Dumb Questions 



O: Do I have to call a method on the OpenHelper to create 
the database? 



No. When you instantiate the OpenHelper, it automatically 
creates the database for you. 




Cool! Where does it go? 



It’s stored on the device under /data/data/<package-name>/ 
databases<database-name>. If you’re ever curious about what’s in 
the database, you can always open it up in SQLite databse browser 
and look at its contents. 
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Prowse to the database file 



After running the app with the Open Helper being created, you 
won’t notice any visual differences. But there are big changes 
behind the scenes. When you instantiated the Open Helper, the 
database file was created and saved to your applications persistent 
storage. 

You can view the file by opening the Android File Explorer. Go to 
Window — > Show View - Other, expand the Android folder and 
select File Explorer. Then navigate to com .headfirstlabs. 
timetracker\databases\ and you’ll see a file called 
timetracker . db. 



The save 
save -the 
y ou\r -Pile 



button -to 

database to 
system. 



ff\ Problems @ Javadoc (j^ Declaration § Console 


Log Cat Q Devices ijjjji File Explorer £3 \ 


to =3 


1 " 1 " “ 


□ 


Name 


Size Date 


Time Permissions Info 








► (^com.android.term 


2011-09-12 


14:22 drwxr-x — x 






H 


► (S com.and ro i d .wal Ipape r.l i ve p icke r 


2011-09-12 


14:21 drwxr-x — x 








► (S 7 com.example.android.apis 


2011-10-05 


18:21 drwxr-x — x 








► com.e xam pi e.and ro i d .1 iveeu bes 


2011-10-05 


18:20 drwxr-x — x 








► S? com.e xam pi e.and ro i d .5 oftkeyboard 


2011-10-05 


18:20 drwxr-x — x 








▼ (S’ com. headfi rs tl abs .t i metracke r 


2011-10-05 


19:15 drwxr-x — x 








V (S’ databases 


2011-10-05 


19:15 drwxrwx — x 








Jl timetracker.db 


3072 2011-10-05 


19:15 -rw-rw 








► & lib 


2011-10-05 


19:14 drwxr-xr-x 








► (S? com.svojc.pl co 


^^^^2011-09-12 


14:21 drwxr-x — x 






1 


► (S’jP-Co.omronsoft.openwnr 


21:10 drwxr-x— x 






1 


► S? don (panic 


2011-09-7^ 


^^0 d rwxr- x— ■ - 








► (S’ local 


2011-09-12 


14 : 2^^^%^jwx — x 






1 


► (S? lost + found 


2011-09-12 


14:20 drwxiw^^^^ 






r 



Select the database file and press the save icon. 
This will allow you to save the entire database file 
locally and view it. Here is a screenshot of the 
sqlitebrowser (http://sourceforge.net/projects/ 
sqlitebrowser/) displaying the contents of the 
database. Right now the database is empty, it just 
includes some default metadata. 



The s^liicbvowscv 
viewing the sglite 
database -Pile. 




you are here ► 



349 




designing your database 



Pesign the database 



You now have the database being created with the 
open helper. But it's empty. Now look at what you need 
to store and how to structure the database to store 
that information. The data for this app are already 
stores in the TimeTr acker Adapter in a list of 
TimeRecord objects. Now you need to store that 
same information in the database. 

You can store this by creating a single table called 
time re cords with a column for time and notes. 



The TimeRetord 
ob\ett an d rb -fields 

* 




Geet Bits 



Notice that the sqlite database file is 
called timerecords.db. The file's name is 
controlled by the database name string 
you passed into the constructor of the 
SQLiteOpenHelper. 




The IP -field is 

the primary key 
-fov- the database. 
This is standard 
prattite -for 
databases. 



id 


time 


notes 


1 


38:23 


Feeling good! 


2 


49:01 


Tired. Needed more caffeine! 


3 


26:21 


I totally rocked it! 


4 


29:42 


Lost some time on this 
hills. But pretty good. 



Sample 

data 
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Create the initial table 

The database design includes the one 
time re cords table that you’ll need to create 
when the database is created. You overrode the 
onCreate method in SQLiteOpenHelper 
when you wrote the TimeTrackerOpenHelper 
which created a blank database. Now that you 
know what the database should look like, you need 

to include the code to create that creates the initial £6}L s-ta-temen-t 

table. Here is the SQL you’ll need to execute. io Cv-cale -the 

I -iir*e\re£o\rds -table 

create table timerecords ( 

id integer primary key time text, notes text 



there-, axe no 

Dumb Questions 



How much SQL do I need to know for 
developing Android apps? 



That really depends on your app. Some apps just 
set up a very basic database and display its contents. 

Others do very complex things with their database, like 
very detailed queries using very intricate database 
schemas. We won’t go into a lot of detail about the SQL 
part of SQLite in this book. If you’d like to know more, 
we can suggest you read Head First SQL. 

Ouv very biased suggestion 
on where to learn move 
about 



A Br&fcL-Ftfewfly Quids 



Head-First 

SQL 
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Updating the database creation 

Update your onCreate method to the following. 
ASQLiteDatabase instance is passed in which 
is an Object wrapper around the SQLite Database. 

You can execute SQL using the execSQL method. 




public void onCreate (SQLiteDatabase database) { 



Call exee£$L 
the database 



■ 7 database . execSQL ( 

"create table timerecords 
" (id integer primary key. 



" + 

time 



text. 



notes text) " 



^ ' Pass in the £$L 
} statament to dveate 

the ti*nev*e£ovds table- 





TimeTracker 

If you run the app again, you still won’t see any visual OpenHelper.java 

or functional change in the app. But you did update the 

TimeTrackerOpenHelper onCreate to update 

the database creation. So check the sqlite database file 

for schema changes. 




Looks -the same as beW 

No new •table in the 
database structure- 
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Exactly why did the 
database not change? I'm not 
going to get very far with 
databases if I change the 
code and nothing happens. 



It’s because the database is persistent 

The SQLiteOpenHelper is helper class for creating 
and managing the SQLite database, which you’ve 
seen is stored in a file for persistence. This way, data 
stored in the file will be available after the app process 
is exited and restarted. 

But the code that was just updated was for 
onCreate which only gets called when the database 
is created. The database doesn’t get created each time 
your app runs though, only the very first time. That’s 
what makes the data persistent. 



Keep reading to see how to update the database 
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Implement onUpgrade 

At this point you have a database you need to update. 
You need to add the time re cords table to the 
original empty database. This pattern of updating 
a database’s schema is common so the open helper 
provides a mechanism for it. 

In the TimeTrackerOpenHelper constructor, you 
passed a version number of the database to super which 
is cached along with the database. If the version number 
changes, onUpgrade is called for you to update the 
database as needed. 

In this case, the upgrade will be quite simple. You just 
need to drop the database and recreate it. 



public class TimeTrackerOpenHelper extends SQLiteOpenHelper { 



TimeTrackerOpenHelper (Context context) { 

super (context, "timetracker . db" , null, 2 ); 

} 



Update the version 
number passed in to super 



public void onCreate (SQLiteDatabase database) { 
database . execSQL ( 

"CREATE TABLE timerecords " + 

"(id INTEGER PRIMARY KEY, time TEXT, notes TEXT)’ 



public void onUpgrade (SQLiteDatabase database, int oldVersion, int newVersion) 

Pv-op tbe tables it database . execSQL ( "DROP TABLE IF EXISTS timerecords"); 

they e%ist and then 

tall onCveate- onCreate (database) ; 




TimeTracker 

OpenHelper.java 
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Tsst DriVq 



Now that you’ve updated onCreate, updated the version number and 
implemented the onUpgrade method, it’s time to test this out. Run the 
app again and inspect the sqlite file in a viewer. 



tteve is -the 
new -table 
and -fields. 



SQLite Database Browser - /Users/jorathansimon /Desktop /timetracker.db 



□ [5 s 






if if if S' 



tv? 



Database Structure Browse Data Execute SQL 



Name 


Object Type 


Schema 


► android_metadatatable 


CREATE TABLE android_metadata (locale TE... 


▼timerecords 


table 


CREATE TABLE timerecords (id integer prim... 


V id 


field integer PRIMARY KEY 




r-2 ^ time 


field text 




notes 


field text 





The database is updated! 



Watch it! 



Don’t forget to update the version number. 

The onUpdade method will only get called if the version 
number, is updated. If you update your database 
schema, make sure to update the version number or 
the database will not get updated to the latest version. 
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Using the database in your app 

The OpenHelper isn’t a database itself. But it does create 
the database for you, and gives you access to it. You don’t 
have to manually create the database, that’s done for you 
when you instantiate the OpenHelper. But you do need 
to call one of the get Database method to retrieve a 
reference to the SQLiteDat abase object. 

Once you have the SQLiteDatabase, you can call any of 
the methods to insert, delete, execute raw SQL statements, 
and more. But first, you need to get a reference to the 
database from the OpenHelper. 

There are two methods you can call to retrieve the database, 
getReadableDatabase to retireve a read only 
database and getWr it able Database and to retrieve a 
database you can read and write to. Since you’ll be writing 
to the database when you add new times, you’ll be calling 
getWritableDatabase . 



Call getWritableDatabase (or 
getReadableDatabase) -to get 
a a database re-Perende 




The Cpenttelpei 
Scales the 
database 





r 

Use the SQLiteDatabase 
instate returned to interact 
with the database 
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SQlAeSatakase Bxposei 

This week’s interview: 

What are you, exactly? 



Head First: SQLiteDatabase, thanks for joining us. 
I know it’s hard to time away from your server to join 
us here tonight. 

SQLiteDatabase: Thanks! But you know, I don’t 
have a server, that’s just soooo old school. I’m an 
individual. I work alone. I refuse to be downtrodden 
by the shackles of a server... 

Head First: Wow! OK, so no server. Gotcha. What 
exactly do you need to run? 

SQLiteDatabase: Sorry, I get a little carried away 
sometimes. My whole point is to run minimally. You 
can just drop my library anywhere, and without any 
configuration, setup, additional processes or weird 
data storage, you have a perfectly functional SQL 
database. 

Head First: Seriously? If you don’t have your own 
process, where do you run? 

SQLiteDatabase: I’m pretty flexible, you know. 

I run in whatever process runs my library. I run the 
their process. But I don’t take much. I’m a drifter. 

Head First: Cool! And where do you store your 
data? 

SQLiteDatabase: On the regular file system in a 
plain old file. 

Head First: Between running as a configureless 
library and storing your data in a plain file, is your 
functionality limited? 

SQLiteDatabase: No way! I’m super powerful. I 
can do multiple tables, triggers, indeces and all kinds 
of fancy stuff like that in my one little file. 

Head First: Wow, I’m impressed! 



SQLiteDatabase: You should be. Also, I weight a 
pretty slim 350k. But when apps need me to be super 
small, I have a special diet I can go on and drop 
down to under 200k. I’m just cool like that. 

Head First: Stop, you’re killing me! How do you fit 
that all in there? 

SQLiteDatabase: A lot of folks use me, and they 
care a lot about making sure I’m super optimized. I 
have my own consortium, you know. 

Head First: Seriously? 

SQLiteDatabase: Yeah! You should check it out, 
sqlite.org. You can see all of the folks there that make 
me happen. 

Head First: That’s amazing! Tell me a bit about 
your object representation on Android. 

SQLiteDatabase: Well, as you can guess, I run 
inside an Android app’s process when I’m used. 

But they need some way to interact with me. So the 
Android engineers built be a nice Object wrapper 
called SQLiteDatabase. Once you get an instance 
of me and my wrapper, you’ve got a fully functional 
SQLiteDatabase at your disposal. Literally, I’m all 
yours! 

Head First: That’s just fantastic. The power of a 
rock solid, fully featured, yet small footprint database 
built into every Android app. It’s a beautiful thing. 

SQLiteDatabase: Can’t argue with you there. 

Head First: Well, thanks for joining us 
SQLiteDatabase. That’s all the time we have, but I’m 
sure I’ll be seeing you around! 
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Database Helper Magnets 

Below is the empty implementation of TimeListDatabaseHelper 
and it's internal SQLiteOpenHelper implemenation 
TimeTrackerOpenHelper. Using the magnets below, complete the 
implementation using constants and string concatenation for all 
helper methods. . 



public class TimeListDatabaseHelper { 



put Constants here 
-for table names, 
database version, etfc. 



public TimeListDatabaseHelper (Context context) { 



Call super here passing 
in Constants instead 
ot raw values. 



database = openHelper . getWritableDatabase () ; 1 




private static final int DATABASE_VERSION =2; | 


private static final String DATABASE_NAME = "timetrac 


:ker .db" ; j 




+ TIMETRACKER_COLUMN_ID + " INTEGER PRIMARY KEY, " i 


private SQLiteDatabase database; | 




public static final String TIMETRACKER COLUMN TIME = "time"; 


1 


public static final String TIMETRACKER_COLUMN_NOTES = "notes"; | 




openHelper = new TimeTrackerOpenHelper (context) ; j 


onCreate (database) ; j 
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private class TimeTrackerOpenHelper extends SQLiteOpenHelper { 



TimeTrackerOpenHelper (Context context) 



Call super “tbe 

' ope* helper, passing m 
Constants- 



public void onCreate (SQLiteDatabase database) { 

Create the database 

^ here, also usm^ 

^ohsta^ts -for the 
exed£$L eall. 



} 



public void onUpgrade (SQLiteDatabase database, 
int oldVersion, int newVersion) { 



Prop and recreate 
the database tables 
dovm here *. 



} 



public static final String TIMETRACKER_COLUMN_ID = "id"; 1 


i 






private static final String TABLE_NAME = "timerecords" ; 




super (context, DATABASE_NAME , null, DATABASE_VERSION) ; 


J 



i 


+ T IME TRACKER_COLUMN_T IME + " TEXT, " | 


"CREATE TABLE " + TABLE NAME + " ( " 1 




database. execSQL( database. execSQL ("DROP TABLE IF EXISTS " + TABLE NAME) • | 



private TimeTrackerOpenHelper openHelper; [ j + TIMETRACKER_COLUMN_NOTES + - TEXT ) 
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// 





Database Helper Magnets Solution 

Below is the implementation of TimeListDatabaseHelper and it's 
internal SQLiteOpenHelper implemenation TimeTrackerOpenHelper. 
You should have completed the implementation using constants 
and string concatenation for all helper methods. 



public class TimeListDatabaseHelper { 



All of -the 
^ohs-fcah-fcs f Q]r 

■the database 
i*ie\rhal values. 



private static final int DATABASE_VERSXON — 2 , 




private static final String TABLE_NAME = "timerecords" ; 



public static final String TIMETRACKER_COLUMN_ID = "id"; 


1 




public static final String TIMETRACKER_COLUMN_TIME = "time"; 


public static final String TIMETRACKER_COLUMN_NOTES = "notes"; 


J 



private TimeTrackerOpenHelper openHelper; 



private SQLiteDatabase database; 



Store variables -for 
the OpenHelper and 
- the database it opens 



public TimeListDatabaseHelper (Context context) { 

openHelper = new TimeTrackerOpenHelper (context) ; 



database = openHelper . getWritableDatabase () ; 

} 

, 

£jet the writable 
database -Prom the 
open helper. 
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private class TimeTrackerOpenHelper extends SQLiteOpenHelper { 
TimeTrackerOpenHelper (Context context) { 



super (context, DATABASE_NAME , null, DATABASE_VERSION) ; 



Build the 
database 
table. 



public void onCreate (SQLiteDatabase database) { 



database . execSQL ( 




"CREATE 


TABLE " + TABLE NAME + " ( " | 






+ TIMETRACKER_COLUMN_ID + " INTEGER PRIMARY KEY, " i 






+ TIMETRACKER_COLUMN_TIME + " TEXT, " j 


rrn 




+ TIMETRACKER_COLUMN NOTES + " TEXT ) " ] 


); 







} 



public void onUpgrade (SQLiteDatabase database, 
int oldVersion, int newVersion) { 



Drop and 
recreate the 
table on upgrade- 



database . execSQL ("DROP TABLE I F EXISTS " + TABLE_NAME) ; 
onCreate (database) ; \ 



} 



} 



} 
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You can implement save with execSQL. 

Now that you have a clean encapsulated helper class 
for managing your database, let’s implement saving 
time records into the database. Start by adding a 
method to TimeListDatabaseHelper to save a 
time record called save Time Re cord. 

Passing in the time and notes values as input 
parameters and constructing a SQL statement using 
string concatenation, you could write this method. 



public void saveTimeRecord (String time. String notes) { 
database . execSQL ( "INSERT INTO T IME RECORDS " 

+ " (TIME, NOTES) " 

+ " VALUES ('" + time + , ' " + notes + 



The input parameters are properly escaped 
and dondatenated in the £$ L statement- 



The time and notes 
values are passed into 
the save method as input 
parameters. 




Note the spades at the 
becynnin^s Jc the lines- Without 
proper spading the £$L 
statement v/ill throw an error- 




TimeTracker 

DatabaseHelper.java 




Watch it! 



Be careful with execSQL and raw SQL strings. 

SQL statements in your code are not checked by the 
compiler. So if you have errors in your SQL statements, you 
won’t know until you run them. In many ways, these dynamic 
SQL stataments where you’re concatenating multiple strings 
at runtime are even worse! At least with complete SQL statement strings 
you can visually inspect the SQL statements for accuracy. Dynamically 
generating SQL statements at runtime can be quite difficult to debug. 
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... but it's a lot better to use insert 

Knowing that dynamically creating SQL statements 
to execute at runtime can be quite difficult, Android 
provides a number of utilities to help you avoid this. 

One of these utilities is the insert method on 
SQLiteDatabase. Insert takes a parameter 
called ContentValues consisting of a set of key/ 
value pairs consisting of the table column name and 
the value to insert. 



public void saveTimeRecord (String time. String notes) { 
ContentValues contentValues = new ContentValues () ; 

ContentValues .put (TIMETRACKER_COLUMN_TIME , time) ; 
contentValues .put (TIMETRACKER_COLUMN_NOTES , notes) ; 

database . insert (TABLE_NAME, null, contentValues); 

} 



TimeTracker 

DatabaseHelper.java 

th&ce-iscce no 

Dumb Questions 




O: Does executing an insert from a 
raw SQL function work? 



Yes, it works just fine. You can 
execute arbitrary SQL statements using 
execSQL. 



v; OK, so I could use either. What 
makes the insert method so much 
better? 

There are a few things that make 
the insert method much better to use. 

First of all, you don’t have to worry about 
the syntax to combine the strings. With 
execSQL, you have to combine the insert 
and the database name with the fields 
you’re inserting in to, plus the values. And 
all this has to be properly formatted with 
spaces, commas, parentheses, and other 
formatting. 



% So I don’t have to do any of that 
formatting with insert? 



Correct. You’re passing the same 
information, but organized in a data 
structure rather than a raw String. This 
helps you avoid a lot of the nastiness of 
piecing together all of these bits of Strings 
in SQL statements. 
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Add database access to TimeTracker 

Now that you have a database setup and 
configured to save time records, you can 
start saving times entered in the app. Start by 
removing the TimeTrackerOpenHelper 
from the TimeTr acker and replace it with an 
instance of TimeTrackerOpenHelper with 
a member variable to reference later. 



public class TimeTracker extends Activity { 

private TimeTrackerAdapter timeTrackerAdapter; 

private TimeTrackerDatabaseHelper databaseHelper; 

Create a member variable 
•C or the database helper. 

public static final int TIME_ENTRY_REQUEST_CODE = 1; 

public void onCreate (Bundle savedlnstanceState) { 
super . onCreate (savedlnstanceState) ; 
setContentView (R. layout .main) ; 

ListView listView = (ListView) findViewByld (R. id . times_list) ; 
timeTrackerAdapter = new TimeTrackerAdapter () ; 
listView. setAdapter (timeTrackerAdapter) ; 




Remove the 
ope* helper. 



Instantiate the 
database helper. 



r — - new — : 

databaseHelper = new TimeTrackerDatabaseHelper (this) 




TimeTracker.java 
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Save new times to the database 

By adding the TimeTrackerDatabaseHelper 
to the TimeTr acker Activity, you have access to the 
database and you can start saving times. 

You’re already saving times to the 
TimeTrackerAdapter in onActivityResult. 
Leave that code for now and add an additional call 
in onActivityResult to save the new time. 

Since the database helper is in view, just add a call to 
addTimeRecord with the new data after adding it tp 
the list adapter. 



protected void onActivityResult (int requestCode, int resultCode, Intent data) { 
if (requestCode == TIME_ENTRY_REQUEST_CODE) { 
if (resultCode == RESULT_OK) { 

String time = data . getStringExtra (TIME_KEY) ; 

String notes = data . getStringExtra (NOTES_KEY) ; 




databaseHelper . saveTimeRecord ( time , 



notes) ; 



Save -the newly entered ti*«e to the database by 
tailing saveTWRetord on your database helper. 



timeTrackerAdapter . addTimeRecord (new TimeRecord (time, notes)); 



timeTrackerAdapter . notif yDataSetChanged ( ) ; 




TimeTracker.java 



Now let’s get rid of some dead code before testing it out.... 
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Remove old code 



Before you run your new code to save new times 
to the database, take a minute to clean up the old 
, unused code you have in the app. 



Start by deleting the TimeTrackerOpenHelper 
from your project since you’ve moved your 
SQLiteOpenHelper implementation to inside the 
TimeTrackerDatabaseHelper. 



You tan delete 
this tlass. 




TimeTracker 

OpenHelper.java 



You can also remove the code that adds the hard 
coded TimeRecords to the adapter. They were only 
needed since you didn’t have data persistence. Now 
that you’re storing times in the database, this will just 
be confusing. 



Get rid of that dead 

code before you forget. It ) 

will just confuse you later. ) 




public TimeTrackerAdapter ( ) { 

bimas^ad d (n e w Tim c R c c oraLP 

trme^raTdrfnew^T±TneRecdrb^ b/\ 

"49:01", "Tired . Needed more caffeine.")); 



Remove all the test 
tode adding hav-d £oded 
TWRetords m the adapter. 



"26-rgjrg-^ U totall y-TOcfced- it ! ") ) ; 
timeBraxidr(-new--T±rneRecor<±f'^ 

" 29:42", ^Tieab-a ome ti me— o n the inbTTa^ But— pnebb^good . ") ) ; 

} 
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Drove 

Now run the app and add a new time. With your latest changes to the 
TimeTr acker, you’ll save to the new time to the database as well as 
the TimeTrackerAdapter. 

You won’t see the database changes directly in the app. You’ll be able 
to do this later, once you connect the ListView to display results directly 
from the database. Meanwhile, you can view the data in the database 
directly and see that the new record is there. 





Notes 



My best run yet! 




Save the database -file loyally a$am 
-pv-or* -the File pKflov-eir and open i-t 
in a £<$Lite bvov/sev- 





SQLite Database Browser - /Users/jonathansimon/timetrackerdb 



□ & s 




Table: ' timerecords t } C J C New Re{:Qr d } £ Delete Record ) 





id 


time 


rotes 


1 


1 


25:08 


My best time yet! 



The new tir*e 
<y>t added! 




< 1 - 1 of 1 > £ Go to: j 0 



you are here ► 
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Query the database 

It’s great that the time record is saving to the database, 
but in order to use the stored information, you need 
to be able to query the database. Just like execSQL, 
SQLiteDatabase has a method called rawQuery 
that allows you to execute raw String based SQL 
queries on the database. 

Now add a method called getAHTimeRecords to 
TimeTrackerDatabaseHelper that will query 
the database for all time records. This method will 
execute a select all query against the database to 
return all of the rows in the time re cords table. 



public TimeTrackerDatabaseHelper (Context context) { 

openHelper = new TimeTrackerOpenHelper (context ) ; 
database = openHelper . getWritableDatabase () ; 

} 

public void saveTimeRecord (String time^^^^ng notes) { 
ContentValues contentVa 1 i]Q^ ^ new ContentValues () , 
contentValues .put (^^^lRACKER_COLUMN_TIME , time) ; 
ContentValues .^^^TIMETRACKER_COLUMN_NOTES, notes) 
database . ij^^Trt (TABLE_NAME, null, contentValues); 

} 



public Cursor getAHTimeRecords () { 

return database . rawQuery ( 

"select * from " + TABLE_NAME, 
null 

) ; ] Theve ave selection 

1 av^s s\y\U youYe seledtmj 

all o£ the vedovds. 



This seledts all 
& P the vows. 




TimeTracker 

DatabaseHelper.java 
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Sftlitc queries return cursors 

ACursorisan object wrapper around a 
database result set. The Cursor contains 
columns and rows filled with data. Think of it 
as a mini spreadsheet with utility methods to 
navigate the results and retrieve specific data 
values. 



The Columns -Pvom 
•the database 




The database <\uevy 
returns a Cursor 
y/hith is being passed 
to the taller o( 
^etAHTirneRedords. 

► 



id 


time 


notes 


1 


38:23 


Feeling good! 


2 


49:01 


Tired. Needed more caffeine! 


3 


26:21 


I really rocked it! 


4 


29:42 


Lost some time on this 
hills. But pretty good. 



The rov/s are the data returned 
-from the guev-y. Your guev-y is 
returning all ot the data, but 
a more spcti-fit guery may only 
return a smaller set- 




Geejc Bits 



There are some disadvantages of using rawQuery just like using the raw 
executeSQL method. For a simple select all method, this works, but for 
more complicated queries where you'll be concatenating string values 
for column names and specific search criteria, this approach falls short. 
But just like the insert method, SQLiteDatabase has a several query 
helper methods to simplify complex database queries. 



you are here ► 
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Navigating the cursor... 

Now you’ve queried the database and gotten a 
Cursor returned. Now let’s take a look at how to 
navigate the Cursor and retrieve data values. 

When you work with a spreadsheet, you have a 
selected row and column which brings a cell into 
focus. The Cursor works the same way. 

The Cursor keeps track of a selected row 
internally and includes several methods to update 
the Cursor’s selected row. 



id 


time 


notes 


l 


38:23 


Feeling good! 


2 


49:01 


Tired. Needed more caffeine! 


3 


26:21 


I really rocked it! 


4 


29:42 


Lost some time on this 
hills. But pretty good. 




Think o£ “tiiis 
whole vow in *fodus. 



Row position 
management methods 



\, 






Row selection 




isFirst ( ) 


] 


metadata methods 




isLast ( ) J 






moveToPosition (int position) j 


getCount() 1 


— ■ — ■ — : — i 








getPosition ( ) | 





U— 

W | Make sure to set the cursor row 
before retrieving values. 

. 1 • if Cursors start out with the selected row 
Wdlvxl 11. se f t Q _-j s 0 jf y OU try ancf retrieve a 
value based on that row, you’ll get a 
nasty exception. Make sure to call moveToFirst or 
moveToPosition before attempting to retrieve a value. 
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... and retrieving valves 

Once the desired row is selected, you can retrieve data 

values using separate getter methods for each data type. Data retrieval 

methods 



getFloat (int columnlndex) 



□ 



getlnt (int columnlndex) 



getBlob (int columnlndex) I 

getString (int columnlndex) 

getDouble (int columnlndex) I 



Looking at this sample data set, if you move the cursor 
to the first row and then call getString ( 1 ) , it 
will return the String “ 38 : 23 ”. 



The seled-t ed 
row. 



id 



time 





Calling ytStriif^O) receives 
the value as a String -from 
the Column at indc* I- 



38:23 



49:01 



26:21 



29:42 



notes 



Feeling good! 



Tired. Needed more caffeine! 



I really rocked it! 



Lost some time on this 
hills. But pretty good. 



theve-tetfe no 

Dumb Questions 




How do I know which type getter to use? 



When you create your database, you assign a column type 
to each column. You can use whichever type you assigned to the 
column for the getter. 




What happens if I pick the wrong type? 



Android does it’s best to convert what’s stored in the 
database to the type of the getter method you called. If it cant do 
the conversion it will throw an exception. 



you are here ► 
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Iterating the cursor 

Sometimes you just need to get a single value 
from the cursor. In those cases, you can go 
straight to the row and get the value you need. 

Very often though, you’ll be iterating through a 
number of results and processing them in bulk. 

$uery the database 
using the helper. 



Cursor cursor = helper . getTimeRecordList () ; 

Move the Cursor to the -first 

if (cursor. moveToFirst () ) { row, checking the boolean 

do { response be-Pore Continuing. 

String time = cursor . gets tring (1) ; 

String notes = cursor . gets tring (2) ; 

Log . d ("DB Value", time + " " + notes); 

} while (cursor .moveToNext () ) ; 

^ Move to next i-f 

there are more rows. 

if (! cursor . isClosed () ) { 

cursor . close ( ) ; t- — Always **ake sure to 

j close the Cursor when 

youVe done- 



Retrieve the data 
values -Prom time and 
notes Columns and 
print the value. 




Next steps 

Now you have data saving in the database, a 
query to retrieve the Cursor, and a way to 
iterate the Cursor to get specific values. Now 
you need to get the data from the Cursor into 
your List Adapter 



Up ne*t : Connecting the 
£$ Lite database and 
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/ Wouldn't It be dreamy if I could just 
^ put this Cursor in a special ListAdapter and 
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Use CursorAdapter 

The Android SDK includes a special adapter to easily 
get a Cursor working with a ListView called 
CursorAdapter. You’ll be able to instantiate 
a CursorAdapter, passing in a Cursor. The 
CursorAdapter then acts as a facilitator between 
the ListView and the Cursor to render the 
contents of the Cursor. 

Like BaseAdapter, CursorAdapter is an 
Abstract class with a few methods you need to 
override to integrate it with your list. But unlike 
the BaseAdapter subclass overriding get View, 
CursorAdapter implementations override two 
separate method. One method, newView, inflates the 
view. The other method, bindView, is responsible 
for populating the view with the selected data. 



The Cursor retrieved -fv-om 
•the database helper with 
the time record data- 










« <ll B 9:12 | 


TimeTracker 


38:23 

Feeling good! 


49:01 

Tired. Needed mo 
26:21 

1 totally rocked it! 


re caffeine. 


29:42 

Lost some time or 


the hills. But pretty good. 


25:08 





The Listi/iew. 




A* Adapter to 
dornrnuidea-fce between the 
Cursor and the Listl/iew. 



tWeiare ng 

Dumb Questions 




Do I have to use CursorAdapter? 



You could follow the idea from a few pages back and 
implement the CursorAdapter on your own. Unless you have a 
really good reason though, you should just use CursorAdapter. It 
will save you a lot of headaches getting going 



n It looks like the getView implementation is split out 
into these two methods newView and bindView. Do I have to 
impelement getView as well? 



I No. In fact you shouldn’t. Just implement newView and 
getView and you’ll be all set! 
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Cursor Adapter Magnets 

Below is the updated TimeTrackerAdapter extending 
Cur sorAdapter. Implement newView to create the 
view and bindview to populate the view with data. The 
cursor manages all iteration, so you just need to call the 
getter value methods and render the results. 



public class TimeTrackerAdapter extends CursorAdapter 



The adapter now extends 
CwvsorAdaftev- 



public TimeTrackerAdapter (Context context. Cursor cursor) 
super (context, cursor); 

} Pass -the dursor 

to super. 

public void bindview (View view. Context context. Cursor cursor) { 



Add a Cursor param -to 
•the donstrudtor. 



The adapter handles all 
dursor iteration -for you, 
you just need to display the 
values in the seledted row. 



public View newView (Context context. Cursor cursor, ViewGroup parent) { 

You dan use the same view 
-for the display. Just dreate 
an inP later and in-Plate the 
view. 

} 



valueTextView . setText (cursor . gets tring (cursor . getColumnlndex (2) ) ; 



Layoutlnf later inf later = Layoutlnf later . from (parent. getCon text () ) ; 



TextView valueTextView = (TextView) view. findViewByld (R. id. notes_view) ; 



nameTextView. setText (cursor . getString (cursor . getColumnlndex (1) ) ; 



View view = inf later . inflate (R. layout . list item, parent, false); 




return view;J 


TextView nameTextView = (TextView) view. findViewByld (R. id. time_view) ; J 
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Cursor Adapter Magnets Solution 

Below is the updated TimeTrackerAdapter extending 
CursorAdapter. You should have implemented newView to 
create the view and bindview to populate the view with data. The 
cursor manages all iteration, so you just needed to call the getter 
value methods to render the results. 



public class TimeTrackerAdapter extends CursorAdapter { 

public TimeTrackerAdapter (Context context. Cursor cursor) { 
super (context, cursor); 

} 



public void bindview (View view. Context context. Cursor cursor) { 



The time and 
nates -f ields are 
both retrieved and 
populated with data 
-from ^etStrin^ tails 
to the tursor. 

} 



TextView nameTextView = (TextView) view. findViewByld (R. id. time_view) ; 


i 


nameTextView. setText (cursor. getString (cursor. getColumnlndex ( 1 ) ) ; 




TextView valueTextView = (TextView) view. findViewByld (R. id. note s_ 


view) 


1 



valueTextView. setText (cursor . getString (cursor . getColumnlndex (2) ) ; j 



public View newView (Context context. Cursor cursor, ViewGroup parent) { 



Layoutlnf later inf later = Layoutlnf later . from (parent. getCon text () ) ; 



View view = inflater. inflate (R. layout . list_item, parent, false); 



| return view; 




The Layout (n-f later 
is retrieved and the 
layout in in-Plated 
and returned 
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Update TiweTraeker 

The TimeTr acker Adapter is now updated to be a 
CursorAdapter subclass. The last thing you need to do 
to use it is to update the TimeTr acker Activity to use 
it. Start by passing in the context (this) and the Cursor 
containing the list of time records to the new adapter. 



— - 

public void onCreate (Bundle savedlnstanceState) { 
super . onCreate (savedlnstanceState) ; 
setContentView (R . layout . main) ; 



databaseHelper = new TimeTrackerDatabaseHelper (this) ; 



ListView listView = (ListView) findViewByld (R . id . times_list) ; 

timeTrackerAdapter = new TimeTrackerAdapter ( 

this , databaseHelper . getTimeRecordList ( ) ) ; 

Pass m the Cursor 

listView . setAdapter (timeTrackerAdapter ) ; d th e text to 

the adapter- 



Now remove the call to add a time record to the adapter. 
You’re already adding the time record to the database. 



protected void onActivityResult ( int requestCode, 
int resultCode, Intent data) { 

if (requestCode == TIME_ENTRY_REQUEST_CODE) { 
if (resultCode == RESULT OK) { 



Save the hew time 
<re£o\rd ih the database, 
and update the Cursor 
in the adapter. 

Poh t add the 
time record to the — 
adapter anymore or 
tall the data thany 
hoti-Citatioh- 



String time = data . getStringExtra (TIME_KEY) ; 
String notes = data . getStringExtra (NOTES_KEY) ; 

databaseHelper . saveTimeRecord ( time , notes ) ; 
timeTrackerAdapter . changeCursor ( 

databaseHelper . getTimeRecordList ( ) ) ; 
^ note: 

^imeTxaokerAdapte^r notif -yBa taSetChange dTTA_ 
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testing your hard work 




Drwq 



The TimeTr acker Adapter is now updated to a Curs or Adapter 
and connected to the ListView from the TimeTr acker Activity. Go 
ahead and run the app. There is one time record stored in the database, 
so if everything works, you should see it in the list. 




Uh oh! Looks like there’s 
an error in the code. 



gomg wiroKg o 





( Don't stop now, you're 
almost there. Find 
and fix the error so I 
can start tracking my 
\ times! 








database persistence 



Tracking down the error 

Open LogCat. If you closed it, you can reopen 
it by going to Window — > Show View — > Other, 
opening the Android folder and selecting LogCat. 



The exception s*taek -trade 
printm*) ou*t in LogCat 



L . . iiar-j. veSta re . maiin natii-t - — — — 

Caused by: iava . lanq\ IlleqalArqumentExcept-ion: column 1 id 1 does not exist 

at android . database . AbstractCursor . qetColTjmnlndexOrThrowf AbstractCursor . iava : 314") 
at android . widqet . CursorAdapter . initf Cursor Adapter . iava : 1 1 li 
at android . widqet . CursorAdapter . <init> ( CursorAdapter . iava : 90i 

at com . beadfirstlabs . timetracker . TimeTrackerAdapter . *init> fTimeTracker Adapter . iava : 14i 
at com . beadfirstlabs . timetracker . TimeTracker . onCreatefTimeTracker . iava : 27) 
at android . app . Instrumentation . call ActivityOnCreate ( Instrumentation . i ava : 1 047 ) 
at android . app . ActivityThread . uerformLaunohAotivity ( ActivitvT^aaad , i^a - 



If you look at the error, you’ll see the following 
error message “Caused by: java.lang. 
IllegalArgumentException : column 
id' does not exist* 6 . At first glace, it might 
seem strange as you have an id column in your 
database. 



But look a little closer, and you’ll see it’s not 
looking for a column called id, it’s actually 
looking for a column called _id with an 
underscore in front. 



The elass overview i» 

■the online does -for 
Cursor Adap-ter even spedi-fies 
i -tha-t you need an D eolumn. 



Class Overview 

Adapter that exposes data from a Cursor to a .List View widget. The Cursor must include a column 
named * itf or this class will not work. 







Now that you know the problem, how are you going to fix it? Think about 
all of the steps you would take to implement the fix before going on. 
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£oh£ EmciSe 



Below is the current complete code for the TimeTrackerDatabaseHelper. All of the 
changes you need to make to the database to update the table to use the _id column (with 
the underscore) instead of the id column (without an underscore) is in this class. 



package com. headf irstlabs . timetracker; 

import android . content . ContentValues ; 

import android . content . Context ; 

import android . database . Cursor ; 

import android . database . sqlite . SQLiteDatabase; 

import android . database . sqlite . SQLiteOpenHelper ; 

public class TimeTrackerDatabaseHelper { 

private static final int DATABASE_VERSION = 2; 

private static final String DAT ABAS E_NAME = "timetracker . db" ; 

private static final String TABLE_NAME = "timerecords"; 

public static final String TIMETRACKER_COLUMN_ID = "id"; 
public static final String T I ME T RAC KE R_C 0 LUMN_T I ME = "time"; 
public static final String TIME TRACKER_COLUMN_NOTE S = "notes"; 

private TimeTrackerOpenHelper openHelper; 
private SQLiteDatabase database; 

public TimeTrackerDatabaseHelper (Context context) { 

openHelper = new TimeTrackerOpenHelper (context ) ; 
database = openHelper . getWritableDatabase () ; 

} 
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public void saveTimeRecord (String time. String notes) { 

ContentValues contentValues = new ContentValues ( ) ; 
contentValues .put (TIMETRACKER_COLUMN_TIME , time) ; 
contentValues .put (TIMETRACKER_COLUMN_NOTES , notes) ; 
database . insert (TABLE_NAME, null, contentValues); 

} 

public Cursor getTimeRecordList ( ) { 

return database . rawQuery ( "select * from " + TABLE_NAME , null); 

} 

private class TimeTrackerOpenHelper extends SQLiteOpenHelper { 
TimeTrackerOpenHelper (Context context) { 

super (context, DATABASE_NAME , null, DATABASE_VERSION) ; 

} 

public void onCreate (SQLiteDatabase database) { 
database . execSQL ( 

"CREATE TABLE " + TABLE_NAME + " ( " 

+ TIMETRACKER_COLUMN_ID + " INTEGER PRIMARY KEY, " 
+ T IMETRACKER_COLUMN_T IME + " TEXT, " 

+ TIMETRACKER_COLUMN_NOTES + " TEXT ) " 



} 

public void onUpgrade (SQLiteDatabase database, 
int oldVersion, int newVersion) { 

database. execSQL ("DROP TABLE IF EXISTS " + TABLE_NAME) ; 
onCreate (database) ; 
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£oh£ ExegctSe 
Solution 



Below is the complete code for the TimeTrackerDatabaseHelper. You should have 
made all of the database changes needed to update the table to use the _id column (with 
the underscore) instead of the id column (without an underscore). 



package com . headfirst labs . time tracker; 



import 

import 

import 

import 

import 

public 



android . content . ContentValues ; 

android. content . Context; 

android, database . Cursori- 

android. database . sqlite . SQLiteDatabase; 

android. database . sqlite . SQLiteOpenHelper ; 



Update the version number. 
This will eausc your app to 
eal I onUpjyrade, whidh drops 
and redreates the database- 



class TimeTrackerDatabaseHelper { 

private static final int DATABASE_VERSION •= Sr 
private static final String DAT ABAS E_NAME = "timetracker . db" ; 
private static final String TABLE_NAME = "timerecords"; 

public static final String T I ME T RAC KE R_C 0 L UMN_ I D = ; =1 w 





Change the u id” 
dolumn to w id” 



public static final String T I ME T RAC KE R_C 0 L UMN_T I ME = "time"; 
public static final String TIMETRACKER_COLUMN_NOTES = "notes"; 



private TimeTrackerOpenHelper openHelper; 
private SQLiteDatabase database; 



public TimeTrackerDatabaseHelper (Context context) { 

openHelper = new TimeTrackerOpenHelper (context ) ; 
database = openHelper . getWritableDatabase () ; 

} 



These changes are subtle, hut really important 



382 Chapter 9 



database persistence 



public void saveTimeRecord (String time. String notes) { 

ContentValues contentValues = new ContentValues ( ) ; 
contentValues .put (TIMETRACKER_COLUMN_TIME, time) ; 
contentValues. put (TIMETRACKER_COLUMN_NOTES , notes) ; 
database . insert (TABLE_NAME, null, contentValues); 

} 

public Cursor getTimeRecordList ( ) { 

return database . rawQuery ( "select * from " + TABLE_NAME, null); 

} 

private class TimeTrackerOpenHelper extends SQLiteOpenHelper { 
TimeTrackerOpenHelper (Context context) { 

super (context, DAT ABAS E_NAME, null, DAT ABAS E_VE RS ION) ; 

} 

public void onCreate (SQLiteDatabase database) { 
database . execSQL ( 

"CREATE TABLE " + TABLE_NAME + " ( " 

+ T IMETRACKER_COLUMN_I D + " INTEGER PRIMARY KEY, " 
+ TIMETRACKER_COLUMN_TIME + " TEXT, " 

+ TIMETRACKER_COLUMN_NOTES + " TEXT ) " 



} 



public void onUpgrade (SQLiteDatabase database, 
int oldVersion, int newVersion) { 

database. execSQL ("DROP TABLE IF EXISTS " + TABLE_NAME); 
onCreate (database) ; 

Y<>u undated -the database vevsion wbidb will dvop 
and vedveate -the database, destroying all ot stoved 
\ data- It you tound this on a pvodudtion system with 
veal usevs and veal data, this is when you would 
ovevvide onMfgvade to mi ^v ate tbe in+ovmation 
tvom tbe old database -Covmat to tbe new one- 
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testing your fix 




Tqst Drii/q 



Now run the app again. Since you updated the database version 
number, the database will be automatically wiped and recreated 
by the database management code when you start the app. 



S rf! 1 «:15 I 



TimeTracker 






The s£v-een s-tav-fcs 
ou-t blank. 




After all that, the 
screen is blank! I thought 
the time entered earlier 
would be in the database 
since it's saved. 



It was saved, but you just 
cleared the database. 

When you upgraded the database 
version to “3” and reran the app, 
onUpgrade was called which 
dropped the time re cords table 
and recreated it. This wiped out 
any saved data you added while you 
were testing. 
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The database is starting off empty because it was 
just dropped and recreated. That shouldn’t effect 
new database records though. Add a new time and 
save it and you should see it in the list. 



fcnicr a 
kcw tW 





sriir 8:20 | 


TimeTracker 




Time 




I 32:54 


□ 




But here’s the best part. From the list screen, press 
the back button to exit the app and then relaunch 
it. Your data is still there! 







;cir you 

save, youll see 
the lis 



It IK 



list. 



You*- data 
is persisted 
a-Pter an exit 
and relaunch- 



£ *\ > 8:25 

TimeTracker 

32:54 

The hills were rough today. 



Excellent work! Your app is 
now storing and loading data 
from a SQLite database. 
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happy customer 




You rock! The app is exactly 
what I wanted. Simple, easy to 
use with no distractions, and 
now it saves my times. Awesome! 



Looks like another happy user! 

Although there are more features you could 
implement in this app, you’ll stop working 
on it here. Try implementing new features 
on your own, like editing and deleting time 
records to really take the app to the next 
level and make Donna even happier. But 
remember, don’t add too many new features. 
She liked her apps to stay simple. 

Have fun on your run, Donna! 
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G® Off Piste 

Now that times are saving in the database, you’re ready to move on. But if you’re still 
thirsty for more, here are a few additional features and exercises you could work on to 
start honing your Android database skills. 



|w»plew>en-t onl/tpy-ade 

You upgraded the database in 
this ehapter without overriding 
onUp^rade to handle the sdhema 
dhan^e. 6fo baek and modify the 
detabase a^ain, implementing a data 
migration in onUp^vade* 



Uplemeivt deleie a*d edii 

Righ-t now you have the ability to 
tveate the database and add to it- 
7Vy implementing methods on your 
database helper to edit previously 
entered time or delete them. 



Mse ^ucvyO 

You queried the database using 
raw^ueryO. But just like exedSgl, 
th's “ l irn 'ted and error prone. Look 
,hto ihe database ^ueryO methods 
and implement a -few more detailed 
queries against your database. 
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picking the important stuff 




Your Android Toolbox 



You just built your first app 
with full persistent SQLite 
database support. Use this 
same process to add database 
support to all your apps! 



Cuysoy Iteration 

9 Quev-y the Database and yt a Cursor in 

yetum 

0 Move to a specie row location m tbe 

CuYSOY 

9 Retrieve ty?ed data ^rom a toU* 

9 Close tbe Cursor when you're done 

Usihj Cuysoy AdapteY 

® Create a class that extends 
CursorAdapter 

• Create a constructor that passes tbe 
Context to super, as well as a Cursor 

• Override new\/iew to inflate an )<ML 
l/iew (or Create one progran>atically) 

• Override bindl/iew and populate tbe l/iew 
with data -from tbe Current Cursor row 




BULLET POINTS 



Create your own databases for your apps so 
you can persist your app data. 



Use SQLiteOpenHelper to simplify 
database management. 



Wrap your SQLiteOpenHelper in a 

database helper class encapsulating your 
database and limiting access to it. 



Expose helper methods on the 
databasehelper to manage database usage 
throughout the app. 

Abstract constants and reusable pieces of 
your SQL statements to make your code 
resilient. 



Use Database helper methods for 
inserting and querying rather than the raw 
SQL methods when possible. 

Always take a look at Android's built in 
components (like CursorAdapter). 
They can save you a ton of work. 

Use CursorAdapter to connect your 
cursor to a list so you don't have to write all 
that Cursor management code. 

Make sure and include an ”_id” column 
in your databse if you plan to use 

CursorAdapter. 

Remember to update your database version 
or delete the database if you make changes 
to your database schema. 

If you do update your database schama, 
consider implementing onUpgrade to 
migrate production data. 
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10 relative layout 



* It’s all relative 








You’ve created a few screens now using LinearLayouts (and 
even nested LinearLayouts). But that will only get you so far. Some of the 
screens you’ll need to build in your own apps will need to do things that you just cant’ do 
with LinearLayout. But don’t worry! Android comes with other layouts that you can use. IN 
this chapter, you’ll learn about another super powerful layout called RelativeLayout. This 
allows you to layout Views on screen relative to each other (hence the name). It’s new 
way to layout your Views, and as you’ll see in the chapter, a way to optimize your screen 
layouts. 



this is a new chapter 
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meet sam and scott 



Meet Taylor and Scott, two super tight 
skateboarding pals 

(And also dating. Well , this week anyway. ) 




They worry about each other 
when they skate apart 

Skating can be dangerous. Crazy tricks, 
broken boards, cops... all kinds of things can 
happen! After chatting with Sam and Scott a 
bit, they asked you to build an app they could 
use to let each other know they are OK when 
they are skating separately. 



Scott and I like to 
skate together a lot. But 
sometimes we like to split 
up and skate at different 
places around the city. 
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relative layout 



IA/bah/ /Vow/ "this looks danjev-ous... 



you are here ► 



391 



design the app 



Resign the app 

Like all good apps, building this app starts out with a 
good solid design. After chatting with Sam and Scott, 
you found out that they want a really specific app. 
Here are the notes from meeting with them. 



Stott 




ftpp desiop notes 

• ceallu s\mple interface'. \ roant -to 
^ocus on shatincy not the app. 

• oust need one contact to 
message. 

• Kieed to clearly see ioh\ch 
contact \he yot se\ected and 
update it d \ need to. 

• e>in button to send a text 
messaae, riyht in the middle o^ 
-the screen so l can’t miss it 1 . 
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relative layout 




Focus on the layout first 

In this chapter, you’ll focus on the layout. You’ll learn 
about a new layout called RelativeLayout that is 
much more powerful then plain old LinearLayout 



Turn the page 
to get started. 



you are here ► 
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investigating layouts 



Nested UnearLayout implementation 



Based on the sketch, you could implement this layout using a 
combination of nested LinearLayouts (layouts inside other 
layouts are called nested layouts). But there’s going to be a lot 
of nesting! And you’ll need to be really careful to get all of the 
parameters right, like which LinearLayouts are veritcal, 
which are horizontal, how to size components and all the good 
stuff you’ve been doing withL inear Lay outs... just a lot more 
at once. 



Here is one way you could implement this layout using nested 
LinearLayouts. 



HoV-izXHrrldl 



f 



Rooi strccr) layout a 
veriital LmeavLayou-t 
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relative layout 



This is getting complicated 

That’s a lot of layouts! Before you start writing the code 
for this layout, let’s take a look at the view hierarchy 
with the layouts and their children on a tree. 



Root vertidal 
linear layout 



The dontadt 

layout 

(horizontal) 



The le-ft 
side o-f the 
dontadt ^ 
layout 
(vertidal) 



The view* on the 
le-Ct side o-f the 
dontadt display 





Lin 

Lay 


ear 1 
out | 






I’m Cool 
Button 






Layout used to 
■ den ter and position 
the 7m Cool" 
button 



The big 7m Cool" 
button to send 
the message. 



The dontadt 
avatar 



Watch it! 



Too many nested layouts kill really 
slow down your app’s performance. 

Not only is this nested layout structure 
complicated to code, but it will also slow the 
performance ofyourapp. There are a number 
of back and forth calls between your screens’ layout 
managers and the Android layout management code, 
and each of these calls take time. The more layouts you 
have, the longer it takes to render your screens. For really 
complex screens, this can make a HUGE difference! 



There HAS to be a better way... 



you are here ► 
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a new layout 



Meet relative layout 



RelativeLayout is a layout that allows you to position 
Views on the screen relative to each other. Where 
LinearLayout positions all Views in a line - either 
vertically or horizontally -RelativeLayout let’s you 
express layout positions like “put this View below this other 
View” or “put this view to the left another View”. 

Add a view positioned in the parent 

Making your own RelativeLayout starts 
with an anchored view. This is a view that has 
an anchor on the screen referencing something 
about the parent view like the top left or right, the 
bottom left or right, or the center of the screen. 



The street — ^ 
(■the yavexi '■« 
■this ease) 



Add (a bunch) of other views 



This tomyonent is 
yositio^ed on "the 
■toy o-f -the sdveen 
(■the yaveni) 

4 




You can add (and keep adding) views positioned 
relative to any other view on the screen. This 
positioning may be relative to an anchored view 
(like View B positioned relative to the View A) 
but it doesn’t have to be. You can also add more 
anchored views, and then other views positioned 
relative to that new anchor view too. 




l/icw is added 
to the right op 
view W 

4 

— — ™ ^ 

B 



I 




\/iew 'C 
under view ^ 




l/iew 'D' is to the 
right o( view % C 
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Chapter 10 








relative layout 



Are you ready for a challenge? 

The Android layout manager thinks you can layout the 
entire screen using just one RelativeLayout. Do 
you believe it? 




RelativeLayout is super 
powerful. You can layout this 
whole screen with just this one 
layout and no nesting. Seriously! 



One RelatweLayou-t as 
-the root sdreen layout 



I 



Con*tadt name 



Phone number 





U Cool' 



No inner 
layouts! 



Sound impossible? Turn the page to get started laying 
out tie screen with RelativeLayout and see for yourself! 



you are here ► 
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anchor your first view 



Choose your anchor point 



The first step when you make a new RelativeLayout 
is to position a View in the parent. This is a view that has 
an anchor on the screen referencing something about the 
parent view like the top, bottom, left, right or center of 
the screen. From there you’ll position the rest of the Views 
relative to the first anchored view. 

For the layout, the first View that you’ll position in the 
parent is the contact Name TextView. And it’s going to 
be positioned to the top left hand corner. 



Once this first View is positioned, you’ll be 
able to layout the rest of the views around it. 
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relative layout 




Anchored View Magnets 

Below is the very beginnings of a RelativeLayout.The layout is 
declared with a type of RelativeLayout and its width and height are set 
to fill the screen. The Textview for the Contact Name is also added, but 
not positioned. You'll need to use the magnets with position parameters 
below to position the View. Remember, it should be positioned to the top 
left hand corner. Hint- you con use multiple positioning attributes together. 



<RelativeLayout 

xmlns : android= M http : / / schemas . android . com/ apk/ res/ android" 
android : layout_width=" f ill_parent" 

android: layout_height="fill_parent"> The f$ela-fco I 

K. ayou£ 



CTextView 

android: id="@+id/ contact_name" 
android : text="Sam" 

android : layout_width="wrap_content" 
android : layout_height="wrap_content" 



The Coirrtae-t 
Name TextView 
( declaration without 
position attributes. 






The positioning 
attributes need to 
go here- 



/> 



</RelativeLayout> 



android : layout_alignParentBottom=" true" 

This attribute positions 
■the view -top the top 
of the parent- 



This positions the V '\ ew to 
the right side of the parent- 





This positions the View at 
the top of the parent- 



This positions the 
view to the le-ft 
of the parent- 



android: layout_alignPaxentLeft=^true" 



you are here ► 
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testing the layout 




Anchored View Magnets Solution 

Below is the very beginnings of a RelativeLayout. The layout is declared 
with a type of RelativeLayout and its width and height are set to fill 
the screen. The Textview for the Contact Name is also added, but not 
positioned. You should have used the magnets with position parameters 
below to position the View. It should be positioned to the top left hand corner. 



<RelativeLayout 

xmlns : android="http : / / schemas . android. com/ apk/ res/ android" 
android : layout_width=" f ill_parent " 
android: layout_height=" f ill_parent "> 

<TextView 

android: id="@+id/ contact_name" 
android : text="Sam" 

android : layout_width="wrap_content" 
android : layout_height="wrap_content" 

This lays out the 
View to -the TO? 
of the fdveirfc. 



This lays out 




These two attributes together position the 
Contact Name View at the top left of the screen. 



android : layout_alignParentTop=" true" 



android : layout_alignParentLef t=" true" 



/> 
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relative layout 




Tost Drug 



Now that the first View is positioned, run the app and let’s make 
sure the View is positioned correctly. 




It’s close, but you can make it even better. The View is in fact 
positioned on the top left, but it needs some space so it’s not pinned 
to the edges. The font also needs to be a bit larger. Let’s make those 
updates to the layout before moving on. 



CTextView 

android : id=" 0+id/ anchored_button M 
android : text="Sam M 

android : layout_width="wrap_content " 
android : layout_height= M wrap_content M 
android : layout_alignParentTop=" true" 
android : layout_alignParentLef t=" true" 

android: layout_marginLeft=" 2 Odp" 
android : layout_marginTop="20dp" 
android: textSize=" 2 Odp" 

f /> 



V 

Polish'.^ the layout With some 
„av-0)ms a»d text Sizing 



Now -there's a little 
bi*t spade- 
/ 




Now it’s time to layout some more Views! 



you are here ► 



401 





add another view 



Positioning views relative to on screen views 



The Contact Name View is looking great! Now 
it’s time to add another View The next view to 
add is the Phone Number view You’ll position it 
under the Contact Name view. 



Attributes for relative positioning 



There are different layout positioning attributes 



relative to other Views on the screen. The 
Contact Name view is positioned relative to the 
parent, but the Phone Number View is going 
to be positioned relative to the Contact Name 
view (another view on the screen). 



You add these attributes to View declarations in 
the layout XML just like the other positioning 



using a value of true, you pass in the ID of the 
view you want to position your view relative to. 



View you re positioning 

android : layout_below = "0+id/contact__name" 



Cow'tadt Kdrne 



He*t> yww y** 1 7 1 

PosiW tv* ^ v *PM I I t ) ^ 




to other Views 



Position to the lett ot 
another domponent*. 



for laying out Views relative to parents and 




Using these attributes 





attributes. The difference is that instead of 




Position to 
the rijht-.. 



This attribute is added to 
the \/iew youre positioning. 



Here you supply the \/iew you want 
to position this \/iew relative to. 
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relative layout 



Add the phone number view 

This snippet shows the Phone Number Text View in the 
layout positioned using the android : layout_below 
attribute to be underneath the Contact Name TextView. 




<TextView android: id="@+id/ contact_phone" 
android : layout_width="wrap_content" 
android : layout_height="wrap_content" 

android :marginTop="5dp" Add some vev-tidal spade- 

android: textSize="10dp" - Setting a smaller W- 

android: text="ll 1-222 -3333" 

android : layout below="@+id/contact name" 



XML 



main.xml 



Tost DriVq 



Now that the Phone Number view is positioned, run the app and make sure it’s in the right place. 



The phone numbev 
view is positioned 
under the doniadt 
name view, but all 
•the wav *to “the 
le-Ct or *the sdveen- 




How come the phone number field is all the way on the left? 

... and so vertically close to the Contact Name view? 



you are here ► 
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aligning your views 



Align your views 

You positioned the phone number TextView 
under the Contact Name TextView using the 
android : layout_below attribute. But why is it 
showing up all the way to the left? 

In this case, positioning the phone number field 
below the Contact Name field controls the vertical 
position, but not the horizontal position. And since 
the horizontal position is not controlled it’s defaulting 
to the left side. 



You can use alignment properties to fine tune the position 



When positioning isn’t enough, you can use the layout 
alignment properties to position a View. There are 
attribute for aligning to the left, top, right, bottom, 

and baseline of another View. Ali^n to the left 

of another view. 



android: layout_alignTop 



Alijn to the top 



Alijn to the 
baseline. 



android: layout_alignBaseline 



android: layout_alignRight 



Alijn to the rijht- 



android: layout_alignLeft 



Alijn to the 
bottom 



android: layout_alignBottom 



Just like the android: layout_below attribute, 
pass the ID of the View you want to align to. 



Alijn to the left -. - the dontadt_name view. 

\i A 

android : layout alignLeft = Q+id/contact^jiame'' 
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relative layout 



Here's the complete layout so far 

Adding bits and pieces at a time can make it hard to see the big 
picture. Take a minute and look at your complete layout so far. 



<?xml version="l . 0" encoding="utf-8"?> 

<RelativeLayout 

xmlns : android="http : //schemas . android . com/ apk/ res/ android" 
android: layout_width="f ill_parent" 
android: layout_height="f ill_parent"> 

<TextView android : id="@+id/ contact_name" 
android: text="Sam" 



Relative Layout 
dedlaration- 



android : layout_width="wrap_content" 
android : layout_height="wrap_content" 
android: layout_alignParentTop="true" 
android: layout_alignParentLef t="true" 
android : layout_marginLef t="20dp" 
android: layout_marginTop="20dp" 
android: textSize="20dp" 

/> 

<TextView android : id="@+id/contact_phone" 
android : layout_width="wrap_content" 
android : layout_height="wrap_content" 
android: texts ize="10dp" 
android: text="ll 1-222 -3333" 
android: layout_below="@+id/ contact_name 



Coniati name 
Tc*t\/iew positioned 
to the top le-ft side 
o( the sdreen 



The dontaet phone number 
Te*t\/iev/ dedlaration. Right 
under the dontadt name 
Te*t\/iev/ and aligned to the 
le-ft to matdh the dontadt 
name horizontal position- 



android : layout_alignLef t="Q+id/ contact_name" 

android: layout_marginTop="5dp" ! \ 

/> 

</RelativeLayout> TKe ^ is 

Te%t\/iew to matdh the 

horizontal position o-f the 
dontadt name Te*t\/iew. 



XML 



main.xml 



you are here ► 
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adding more views 




Tqst DRlI/e 



Now that you have both the contact name and phone number Views positioned in the layout, check and make sure 
your positioning worked correctly But this time, instead of launching the app, just click on the Graphical Layout 
tab. Not only will you be able to see if your layout worked, but you can see graphical layout position and alignment 
indicators if you click on a View on the screen. 



This line indicates that the phone number view is 
• aliened to the lett ot the dontatt name view. 



The phone number 
view is seledted- 



Editing config: default 
S.Zin HVGA slider CADPlTT Portrait 



ij] Palette 


v 


& Form Widgets 





TexlView LciTgE 

Medium Small 



>/ Check B o x 



Radio Button 



CheckedTextView 





Sam 



Layout position 
and alignment 
parameters. 



fj Text Fields 
CD Layouts 
CD Composite 
fj Images & Media 
CD Time & Date 



CD Transitions 



Cj Advanced 



Custom & Library Views 



The phone number view is 
now positioned dorre^tly* 



F Graphical Layout main .xml 
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relative layout 



Add the Update Contact button 



You’ve already positioned two Views 
on the screen and just three to go! 
With the Contact Name View and the 
Phone Number View added, it’s time 
to add the Update Contact Button. 



Next up, “the updaie 
dontad: button... 




Sharpen your pencil 



Below is the declaration of the update contact button. Position 
the Button below the phone number View and aligning to the 
left of the Contact Name View. Give it 1 Odp of vertical margin. 



<Button android: id=" @+id/update_contact_button" 
android : layout_width="wrap_content " 
android: layout_height="wrap_content" 
android: text="Update Contact" 



/> 



you are here ► 
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testing the alignments 



Solution 



Below is the declaration of the update contact button. You 
should have positioned the Button below the phone number 
View and aligned it to the left of the Contact Name View. Give it 
10dp of vertical margin. 



<Button android: id="0+id/ update_contact" 

android : layout_width="wrap_content " 
android : layout_height="wrap_content" 
android: text="Update Contact" 



a^dv-oid^layout^bcloy/— w @+id/dohiad't_ 
aKdvoid : layou*t_ ali^Lc-f-t—^+id/ doh-tad-t^amc^ 

a ur * a ^ oid : la Y w ^^^ 

/> 



there j are no 

Dumb Questions 



Q.: Why is the button aligned to the left of the contact name 
view and not the contact phone view? 



Either one would work. The reason is that the contact phone 
view i aligned to the left of the contact name view. So setting the 
button to align to the left of either the contact name or contact 
phone would both work. Sometimes it’s better to have a single 
alignment view that is referenced by multiple views and other times 
is better to have the layout positioning and alignment refer to the 
save view. It’s really up to you how you want to organize your 
layouts. 



o; What if I want to position a View relative to another View 
on the screen, but align with the parent? Can I mix and match 
like that? 

You sure can! Say you wanted to position the button below 
the phone number view but align it on the right side of the screen. 
You could use the layoutBelow attribute to position the button 
below, but use the layout_alignParentRight attribute 
to align it to the right side of the screen. Pretty slick! 
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relative layout 




Tost Drivq 



It’s a good idea to test your layouts early and often, especially when you’re working with RelativeLayout! This way, 
you don’t go too far down a path if a View isn’t positioned correctly 



The button is added t> 
-the view, and positioned 
t> the le£t mat£hin$ both 
the Contact name and 
phone number \/iew. 




Tkis is looking great! 




Next up... Adding 
the contact portrait. 



you are here ► 
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adding more views 



fretting ready to add the contact portrait 

Your ready to add the portrait I mage View to the 
screen. This I mage View is going to diaplay the avatar 
associated with the contact. You’re going need an image 
to use to position it and make sure it looks OK. 

For now. just set the background to an RGB color and 
give it a size in DPs. This way, you can layout the view 
on the screen and make sure it’s positioned correctly. 




Adjust the ImageView attributes below. Align it to the top 
of the Contact Name Textview and to the right hand side 
of the screen. Also, add 2 0 dp margin on the right to give the 
ImageView a border between it and the right edge of the 
screen. 



<ImageView android: id="@+id/ contact_portrait" 
android: layout_width="50dp" 
android: layout_height="50dp" 
android : background="#aaa" ^ 



android : adj ustViewBounds="true" 



android^djustl/iewBounds 
is set to true so the 
ii*age will adjust as heeded- 



Set the background to a 
light gray so you can easily 
see it to position it- 



/> 
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relative layout 




Fireside Chats 



Tonight’s talk: Is Relative Layout The New GridBagLayout? 



RelativeLayout: GridBagLayout: 

Shudder. I can’t believe I’m here with GridBagLayout. 

Talk about getting off on the wrong foot! What’s 
wrong with being here with me? 

For everyone out in the audience, GridBagLayout was 
the magical layout in Java’s Swing desktop UI Toolkit 
that was supposed to be able to layout your whole 
screen in one layout. 

Yup. That sounds about accurate. 

Sure, except that you are impossible to use! You have 
made countless developers cry. Seriously! 

Now wait a minute, that’s just unfair! It’s true I have 
a rather complex grid structure that my developers 
have to learn, then place each component in the 
right position in the grid... 

Exactly! See, I have no grid. You just position a 
component somewhere on the screen and position 
other components around it. Simple! 

You know, I don’t have to sit here and take this kind 
of badgering from you! 

I’m sorry! I didn’t mean to offend you. I just wanted 
to point out that although we both can layout very 
complex sets of components we do so very differently. 

I use relative positioning to create very complex 
layouts... 

Right, and I use a grid. 

Exactly. But I’m just saying I’m waaaaaay easier to 
work with than you are. 

OK, sure. I do require a person willing to devote 
effort learning and working with me. 

Ha! There you have it. I’m easier to use! 



Yes. Yes, I am. 



OK, you are easier to use. Are you happy now? 



you are here ► 
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adding another button 



c^Jha r p en your pencil 
k Solution 



You should have adjust the imageView attributes below, 
aligning it to the top of the Contact Name Textview and to the 
right hand side of the screen. You should have also added a 20dp 
margin on the right to give the ImageView a border between it 
and the right edge of the screen. 



6 \\ ve a little 

spate on 
the right- 



<ImageView android: id="0+id/portrait" 
android: layout_width="50dp" 
android: layout_height="50dp" 
android: background="#aaa" 
android : adj ustViewBounds="true'‘ 



ahdroidiayou*t — alighPav-cttRighi—^ttuc^ 
ahdroidiayoui — alig^Top— ^+id/ £ontatt__name ;; 
r ahdv'oid-layoui^a^g'mRi^tt— ; ZOdp ;; 



Align the view to 
the top right of 
the street 



/> 



The right and lett 
margins matth 




The /magel/iew -for the 
portrait is aligned with 
the top of the Comlati 
Name Textl/iev/ ah£ | ^ 
^'9^^ of the screen. 
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relative layout 



Time to add the "I'm Cool" button 



OK, you’ve only got one more View to add to the 







How would you position the I’m Cool button? 
What component would you align it with? 
How are you going to position it? 



screen... the big I’m Cool Button. 



Corrtad*t name 



Phone numbev- 



Update Contadt 

77TT77 / i it > l 



I'm CooV 



you are here ► 
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detailed positioning 



Positioning the "I'm Cool" button 

Did you think about how you could position the 
I’m Cool button? What did you come up with? One 
option you may have come up with is adding the 
button under the Update Contact and giving a little 
margin to the left. 



Position it 
undevtbe update 
dontaet button. 
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relative layout 



Always think about resizing 

The truth is, new Android deveices are coming out all 
the time with different screen sizes. Your best bet is 
think ahead and try and plan for as many screen sizes 
as possible. If you position the I’m Cool button some 
distance below the Update contact button, it may look 
good on some screens that your testing on. But with if 
the screen is really long? It’ll be pinned to the top! 

So what can I do? 

There is another useful positioning element you can 
use to center the view in the parent- both vertically and 
horizontally. If you use that positioned element for the 
I’m Cool button, it would look ok on the smaller screen 
on the left AND the long screen on the right! 



Not vertically 
Centered* Too 
hi<}h up oy\ this 
I oy\<$ screen* 



Contact name 



Phone number 




Update Contact 








frw Coo 


i! 



<Button android: id="@+id/ im_cool" 

android : layout_width="wrap_content" 
android : layout_height="wrap_content" 
android : text="I ' m Cool!" 

android : android : layou t_cen ter InParent=" true" 




I I I C 4 III* /\ I III 

horizontally in the parent* 

You’re done! Now let’s take a look at the completed layout. 



you are here ► 
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layout comparison 




Drove 



All of the Views are laid out on the screen and (hopefully) 
positioned properly. Run the app in the emulator and make 
sure everything is where you expect it. 



CoY\{dt{, Y\drr\C, 

number and update 
button all le-ft 
aliened and tbe 
top ot tbe screen. 



One button right 
i* tbe middle ot 
tbe screen to send 
a message to tbe 
^ontaet- 




It looks Great! 



Portrait up on 
tbe top right ot 
tbe screen. 




You may have noticed the I 5 m Cool butt is a little small. 

The button is a little small now, you’ll be fixing that in Chapter 12. 
There, you’ll learn some advanced graphics techniques and make 
this button a large graphic. 
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relative layout 



Comparing the layouts 

With the screen layout all finished using 
RelativeLayout, let’s go back and compare 
the tree of the nested LinearLayouts with 
the new and improved RelativeLayout. 



Before 



After 



ReplaLmj the root LinearLayout 
with a RelativeLayout-.. 








Name 




Label 




» 






These irmeavLayouts 
were all removed. 



J 



Phone 

Label 



Update 

Contact 

Button 



Now you have . 
just one layout 
-for the whole 
screen! 




I’m Cool 
View 



Not only is everything laid out correctly... 
but it’s all done with one layout. 



you are here ► 



417 

















G# Off Piste 

You're quickly becoming a RealativeLayout master by the end of this chapter. If you're 
ready for more, here are a few pointers to more information on RealativeLayout and 
other cool layouts. 



RelativeL-ayou-t dots 

6,0 -to //develoywWwid. 
tom/veWnte/ai ndvoid/ vjid^c-t/ 
RelatWeLayou-tVW tv detailed 
RelatWeLayowt dotuweivtaW- 



Other layouts 

RelativeLayout isK ; t the ok ly 
layout manger ok the blodk. 6\o 
to http:/ / devdoper.aKdroid.dom/ 
guide/ topids/ ui/layout-objedts. 
html lor a ^uidk look at other 
layouts Kot dovered here, iKdludmg 
FramcLayout aKd TableLayout- 



Write your oum layout 

Layouts are Kot magidal bits ol dode 
passed dou/K ik the aKd il youVe 
do’mg someth'mg spedial you daK write 
your owk| Chedk out the dodumeKtatioK 
lor the View^roup abstradt dlass 

(http : / / developeraKdroiddom/ 
relereKde/ aKdroid/ viewViev/^jroup. 
html) lor mlormatioK ok writiKg you r 
owk layouts. 
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relative layout 




Your Android Toolbox 

You just laid out your first screen 
with RelativeLayout. Let’s take a 
look at what you’ve learned. 



RelativeLayout ?' rotess 

|. Add a* amoved view aliped with 
■the parent 

t. Add more views relative to the others 
views added 

l. Add more authored views and v.ews 
relative to other views as neeeded 

A". Rinse and repeat! 




BULLET POINTS 



■ Too many nested LinearLayout can slow 
down your application performance. 



■ Use RelativeLayout to optimize deeply 
nested LinearLayouts. 



■ Align views to the parent positions 
using alignParentBotton, 
alignParentTop, 
alignParentRight, and 
alignParentLef t. 



■ Layout Views relative to other on screen 
views using layout_above, 
layout_below, layout_ 
toRightOf , and layout_ 
toLef tOf . 



■ Align Views relative to other on screen 
views using layout_alignTop, 
layout_alignRight, 
layout_aligntLef t, layout_ 
aligntBaseline, and layout 
alignBottom . 



CHAPTER 10 




11 content providers 



Working yrith device contacts Y 




One of the greatest things about Android is how well 
applications can work together. So far, you’ve built an apps that access 
content on the Web (like the NASA Daily Image app) and apps that generate their own 
content (like the TimeTracker app). But sometimes you need to access your users content 
on their device to make the app fit seamlessly into their user experience. Luckily, Android 
makes that super easy for you! In this chapter, you’ll learn how to select contacts using 
contact selection built into the OS. You’ll also learn how to query contacts stored on the 
device and a few different details about them. 



this is a new chapter 
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something is missing 



Your app has a big problem at the moment... 



... it doesn't actually work 

f 

Vet! 




He’s got a point, you know. 

You just finished laying out all of the views, 
but that still won’t allow Sam or Scott to send 
messages to each other. Let’s get the guts 
of the app built out and get Sam and Scott 
messaging each by the time they get back. 
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Here's what you're going to do 



Sure, you have some work to do. The app doesn’t have the 
functionality you need yet, but you laid the groundwork 
with the layout you built in the last chapter. Here is what 
you’re going to do in this chapter to make the app work. 




Babe, I'm Cool. 



o 



o 



o 



Select a contact 



Select a contact 



Pressing the update contact button 
should show a screen allowing your 
users to select a contact from the 
phone. This way, your users won’t 
have to enter contact information 
multiple times. 



Update the display 

After the contact is selected, the 
contact display (the contact name, 
phone number and photo) should 
update to display the selected 
contact’s information. 



Send a text message 

This is the real user goal of the 
application. Once the contact is 
selected, your users should be able 
to press one button and have a text 
message automatically sent to their 
selected contact. 



r 

Sent selected 
Sam’s 





you are here ► 
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making the contact clear 



Make it clear that no contact is selected 

When you first launch the app, no contact is selected. In 
the last chapter, you designed and constructed the user 
interface with some temporary contact information. But 
now that you’re making the app work, start by making it 
clear that no contact is selected when it launches. 

Start by adding a new method called renderContact 
and call it from onCreate. Right now this method will 
just display a message to select a contact. Later, it will 
display the contact you’ve selected. 



public class ImCool extends Activity { 



public void onCreate (Bundle savedlnstance ) { 

super . onCreate (savedlnstance) ; 



setContentView (R . layout . main) ; 

renderContact ( ) ; 



private void renderContact ( ) { 



Add a v-endev-ContadtO method 

tailed tom o,C,eate().y#y- 

■this is just showing the no dontadt 
message but eventually this will 
display the dontadt theve «s one- 



6jet vetev-endes 
to the dontadt 
display views. 



( TextView contactNameView = 

(TextView) f indViewByld (R . id . contact_name ) ; 
TextView contactPhoneView = 

(TextView) findViewByld (R. id. contact_phone) ; 
! ImageView photoView = 

(ImageView) findViewByld (R. id. contact_photo) ; 



contactNameView. setText ("Select a contact"); 
contactPhoneView . setText ( " " ) ; 
photoView. setlmageBitmap (null) ; 

} 

} 



Display a message m 
the name view av\d 
blank out the vest- 




ImCool.java 
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rtcv"C is “the Select 3 
toniati" te*t displays m 
the dis\>layNa*«e Vield- 



The render contact 
change looks good! 




Vow let’s get started selecting a contact. 



you are here ► 
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selecting a contact 



How do I select a contact? 

You’re ready to select a contact now. You could have 
them enter their contact’s name and phone number 
and select a picture to make the app work. But they’ve 
already entered that information into their phone, 
in their contact list. So just let your users select a contact 
from their contact list and you’ll save them a lot of boring 
data entry, and leave your app focused on the cool stuff. 

But how should you build a contact list selecting screen? 

You could build a screen that loads and 
displays contacts stored on the phone... 

Here is what the flow would look like if you built your own contact 
screen. When you press update contact, you’d go to your new 
screen and back to the main screen after you selected a contact. 



A ^ • 

Babe, I'm Cool. 

Select a contact 



Build this sdneen to display 
the ton tatts and allow a 
wsev to seledt one- 





£jet the stoned ontadts 
on the devite- 
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native contact selection 



Pon't custom build... 

Android already has behavior built in to select contacts. 
This is used to select contacts for phone calls and other 
native apps. But it can also be used by apps like yours 
so you don’t have top build it yourself. 

... use the native contact select screen 

Using the native contact selection screen will keep the 
same flow, but you won’t have to build it yourself. 



. ' ® 8:01 pm 



Babe, I'm Cool. 



Select a contact 



/• cup 



Pressing update Contact launches 
the native Contact election scveen- 



l \$ tev selecting a Contact) the user 
it taken back to the main screen- 



^ $ . ill® 8:36 pm 




The native Contact 
selection screen? 



there-, ecce no 

Dumb Questions 




Why is it better to use the native contact selection? 



First of all you don’t have to build it! But more importantly, 
it guarantees your users experience is the same as the native 
experience. If there is a modified version of the contact selection on 
your users’ devices, they’ll see whatever is native when you invoke 
the selection request. Also, if the native contact selection changes 
over time, you’ll get whatever the latest behavior is automatically. If 
you built it yourself, it might look different than what your users are 
expecting. 



O: OK, I get that. But what if I really want to make a custom 
replacement for native behavior in my app? 



You could do that too. You could query the contact store 
directly and build a custom screen or component displaying the 
content and allowing your users to select contacts that way. But this 
chapter is going to focus on using the native selection. 
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Invoking the contact screen 

OK, so it looks like the built in contact selection is the 
way to go. But how do you invoke it from the app? 



You can use Intents 

Intents are a generic mechanism for invoking an action 
that the system can respond to. When you built the 
screen navigation in the TimeTracker app, you specified 
the Activity you wanted to invoke in the Intent. When 
the Android action code processed that Intent, it saw the 
reference to the Activity and invoked it directly. 



The action todt 




A*d stav-b 

M yAfrtwity- 



MyActivity 

> — 



Put you can be WAY more abstract than that. 



You don’t actually have to include a reference to an 
Activity in an Intent. You can also supply a Uri or a 
combination of Uri and an Action. And if you invoke the 
Intent, the Android action code looks for an Activity that 
responds to that Uri and invokes it. 




Specify -the Uri 
a*d Action. 




Uri: Contacts 
Action: Pick 



"Hie ae-fcioh Code 
processes -the intent.. 




A*d starts the 

dontafct selection. 

Contact 

Selection 



you are here ► 
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creating the intent 



Select the URL and Action 

You can find extensive documentation for the Uris 
and Actions you can pass into an Intent in the Intent’s 
online documentation. Go to http : / / developer . 
android . com/ reference /android/ content/ 
Intent . html to take a closer look. 



http : / / developer . android . com/ reference/ android/ content/ Intent . html 



Cl Intent | Android Developers X 



C? ft © developecandroid.com/reference/android/content/lntent.html 


☆ 


m d 0 & \ 


© All items IS} CHI TED © Delicious CH bay 


[ ] house 


CD site f~l bikestuff f~H jobs 


© Read Later 


» n Other Bookmarks 


CinD^OD 








£ f English t } Androkl.com 


developers 




| search developer docs 


f Search ) 










Home SDK Dev Guide 


Reference 


Resources Videos 


Blog 


0 Filter by API Level: f 13 T) 



andraid.app.adnnin 
and ro id .app. backup 
a nd raid .a pp widget 
and raid, bluetooth 



android, content 



and raid .content, pm 
and raid .content, res 
and raid .data base 
a nd ra id .data base .sql ite 
android.drm 
and raid .gesture 
android.graphics 
a nd raid .graphics. drawable 
a nd ra id .g ra p h ies.d rawa b le .s ha pe ^ 

t ’ " ' i ^ 

Co nte ntPra vide rResu It 

. — an — _ 

r \ \ j i 



Lfe-e Tree Navigation 



■ ACTION vi EW content://contacts/people/1 - Display information about the person whose 
identifier is 11 T . 



♦ ^act ion D n te n t://c ontac ts/p e op l e. 1 - Display the phone dialer with the person filled in. 

/■\ apt l ON view tel: 123 - Display the phone dialer with the given number filled In. Note how the 
VIEW action does what what is considered the most reasonable thing for a particular URL 

* ACTION DIAL tel: 123 - Display the phone dialer with the given number filled in. 

* action edit content://contacts/people/1 - Edit information about the person whose identifier 

is *T 

GaCT i on Vi E^^ ontent://contacts/people/ - Display a list of people, which the user can browse 
mroL'nn. fnis"example is a typical top-level entry into the Contacts application, showing you the 
list ■ffljfteople. Selecting a particular person to view would result in a new intent { ACTION VIEW 
conftlnf://cof7facfs/W } being used to start an activity to display that person. 



* ► ^ 



WsmO> -tW.s attioiri) 

tan a tontatt 



^ Sih 9 f action, you 
vitf 7 a fo* of all don-tac-ts 
m -the doirtad-t list. 
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Creating an Intent 



You need to create an Intent to select a contact from the contact 
list. You can create this Intent using the constructor that takes an 
Action and Uri. 



The action that the 
activity will invoke- 



The u\ri de-fihih<j 
the data -for 
the aetioh. 




Intent ( String action, Uri uri ) ; 



The U r i is a reference to data on the device, while the Action says 
what to do with the data. So you’ll pass in the Intent . ACTION_ 
PICK constant. But what about the Uri? 

Ur is are actually human readable descriptions of where to find the 
data. The Uri to find all of the contacts in the phone’s contact list is 
content : //com. android. contacts/contacts. 

But to make the types work with the constructor, you need to convert 
the string in a Uri object which you can do using Uri. parse. 



Uri contactUri = Uri. parse ( 

"content : / /com . android . contacts/ contacts' 

) ; 



Hrm. You have a constant 
for the action but not the 
Uri. You sure there’s not a 
constant for that too? 



Is it a good idea to use a 
String to create the Uri or is 
there a constant you can use. 

Let’s take a look... 




you are here ► 
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Use constants when you can 

The Ur i created by parsing the string will work, but raw 
strings are just a hassle to keep in your codebase. The 
format could change in the future or you could just have 
a typo in your code that the compiler wouldn’t catch. 
Always best to use constants if you can. And there is just 
such a constant you can use. 

Take a look at ContactsContract.Contacts 



http : / / developer . android . com/ reference/ android/ provider/ ContactsContract . Contacts . html 



^ ^ ^ Cl ContactsContract.Contacts X ^ 

<■ ^ C A © developer.android.com/reference/android/provider/ContactsContract.Contacts . . ^ a q, a □ g, \ 



developers 



Home 



Resources Videos 



9 ( English 



□ Filter by API Leva 



android.opengl 
android.os 
android.os.storage 
android.preferenct 

android.renderscript 

android.sax 

android.se rvice.wallpaper 

android. speech 

android.speech.tts 

android.telephony 

android.telephony.cdma 

android.telephony.gsm 

android.test 

< ' 3 



ContactsContract.Contacts.Data 
ContactsContract-Contacts.Entity 
ContactsContract.Contacts.Photo 
ContactsContractData 
ContactsContract.Directory 
ContactsContract.Groups 



Public Methods 

static Uri 



getLookupUri (ContentResolver resolver, Uri contactUri) 

Builds a content_lookup_uri style uri describing the requested 
contacts entry. 

getLookupUri (long contactld, String lookupKey) 

Build a content_lookup_uri lookup uri using the given _id and 

LOOKUP_KEY. 










public static final Uri 


CONTENT.STREQUENTURI 


The content:// style URI for this 
table joined with useful data from 
ContactsContract . Data, 
filtered to include only starred 
contacts and the most frequently 
contacted contacts. 


public static final Uri 


CONTENT.URI 


The content:// style URI for this 
table 


public static final Uri 


CONTENT_VCARD_URI 


Base uri for referencing a single 
contacts entry, created by 
appending lookupkey using 
withAppendedPath ( uri , 
String). 





— 



(ret ready to invoke the new Intent 

You could launch the new Activity by calling 
startActivity,. But in this case, you want to have 
the selected contact returned after the contact selection 
is complete. That’s OK though, you can just use 
startActivityForResult just like when you built 
your own screens. 
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Contact Selection Intent Magnets 

Below is the code for onUpdateContact and onActivityResult. Complete 
startActivityForResult by creating an Intent and passing in the Action and Uri. 
In onActivityResult, print the returned Intent to the Log to see what comes back. 




you are here ► 
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invoke the intent 




Contact Selection Intent Magnets Solution 

Below is the code for onUpdateContact and onActivityResult. You 

should have completed startActivityForResult by creating an Intent 
and passing in the Action and Uri. In onActivityResult, you should have 
printed the returned Intent to the Log to see what comes back. 




private static final int PICK_CONTACT_REQUEST = 0; 
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fretting ready to test contact selection 



The contact selection code is all ready to go, but there are 
a couple of things to update in your project before you 
run it. First you need to add the onClick property to 
the Update Contact button on the screen to invoke the 
onUpdateContact method. 

<Button android: id=" @+id/update_contact" 

android : layout_width="wrap_content " 
android : layout_height="wrap_content " 
android: text="Update Contact" 
android: layout_below=" @+id/ contact_phone" 
android : layout_alignLef t=" @+id/ contact_name" 
android : layout_marginTop=" 1 Odp" 



android: onClick=” onUpdateContact" 



/> 



Add an onClidk property pointing to the 
onUpdateContact method you just wrote* 



XML 



main.xml 



Now add the READ_CONTACTS permission to your 
AndroidManif est . xml file. Without it, you’ll get an 
error when you try and access the contacts in your app. After 
all, a users contacts are sensitive information so you need to 
ask and they need to give you permission. This should also 
clue you in to being really sensitive to what you do 
with that access. 



</application> 

<uses-sdk android:minSdkVersion="10" android: targetSdkVersion="10" /> 

<uses-permission android: name=" android. permission .READ_CONTACTS"/> 



</manifest> 



Permission to addess the 
dontadts stored on the devide* 



■ 




AndroidManifest.xml 
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testing contact selection 




Drove 



Now that the Intent is created and being started, you should see the contact lost display when you press the Update 
Contact button. Go ahead and run the app and check to make sure it’s working. 




To add contacts, press Menu 
and touch: 



♦ Accounts to add or configure 
an account with contacts you 
can sync to the phone 



• New contact to create a new 
contact from scratch 



• Import/Export 



VVV»oaV»! ttovi dome 
*theve avWt 

doyrtadts? 




Wait a second! It looks like the ) 
contacts page is displaying but 
there are no contacts. Did you 
^ tell us to build the wrong stuff? 



You don’t have any contacts in your setup in the emulator. 

The reason you’re seeing this screen is because the app is running in an emulator 
that doesn’t have any contacts configured. You have a few options here. You 
could create the contacts on the phone, but we also want to test images and 
images are hard to test on the phone. And you’ll want to test the text message 
sending anyway which you can’t do from the emulator. 
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Run the app on a device 

Plug in your Android device using USB and remember to turn on the 
option to allow non-market apps. Then just run the app again from 
Eclipse and select your hardware device. 

Now that you’re running the app on your device, when you go to the 
Contact Selection screen, you should see a populated list of contacts. 
Click on a contact and you’ll be taken back to the home screen. 




you are here ► 
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next steps 




Looking good so far. I like that selecting 
a contact looks like my other apps. Now 
you're going to display the details, right? 
This way, I'll know I've selected Scott so I 
know I'm texting the right person. . 



Definitely! Displaying the sected 
contact is next on the list. 

Now that the contact is being selected, it’s time 
to display that contact on the home screen. To 
get this working, you’ll need to get a reference 
to the contact that was selected, retrieve the 
display name, phone number and photo for 
that contact and display it on the screen. 
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Displaying the contact information 



Reive ived -fields 
-from ihai eohiaei. 



Display ihose -fields 
ot\ ihe sdveen- 




Start by looking at what's coming back 



You’re already getting the contact back to the ImCool 
Activity in onActivityResult. You also put a log 
statement in there to see what the returned Intent 
contains for its data. Take a quick look at the log and 
see what came back. You should see one line that looks 
something like this: 



Lo^Cai 10331*3 

pv’mioui 



This string starting 
W.th "content//" 15 ^he 
data vetuvned tvom the 
tontadt selection- 



08-10 15:44:52.131: DEBUG/Intent Data(355): content : //com. android. contacts /contacts/ 
lookup/ 0rl-512D45/l 
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contact URIs 



What is that string referencing? 



If you’re thinking that the string printing out in the 
logs looks kind of like some kind of a local web address, 
you’re not too far off. It’s actually a URI, or Uniform 
Resource Identifier which is a string that locates a 
specific resource. The different between the URI here 
and a web URL is that the URI here is an address for a 
local resource. In this case, the URI is a reference to the 

selected contact . . . r 

/idtion to perform 

on the dontaets. 



The Uri portion 

pointing to don*tad*U 




Lookup Key -for the 
seledted dontadt* 




content: //com. android. contacts/contacts/lookup/0rl-512D45/l 



Last known position 
-for seledted dontadt (a 
seardh optimization). 



OK, so this points to a 
contact. But I don't want a 
reference to the contact, I 
want the actual contact! 



You can look up the contact using the URI 

This Uri doesn’t contain the real contact (which you need 
to get the name, phone number and photo to display on 
the home screen. But it does represent a direct lookup 
to that contact. 



O o 
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Accessing the contact 

There is a contact data store built into every Android 
device. You can query the contact data store for specific 
contact information, like determining which contact 
has an associated phone number for building caller ID 
functionality, or in our case, just finding more properties 
for a contact that you already know about. 

There is a utility class called Content Re solver that 
you can use to query the contacts. Using this Uri and 
a query to the ContentResolver , you can get to 
the raw contact! Then using what you learned when you 
iterated through database results, you’ll iterate through 
the contact result Cursor it returns. 



© 



A query is sent to 
the ContentResolver. 



Your app 
needs to 
query contact 
information. 




The ContentResolver 
processes the query 
and returns a result 
cursor from the 
contact store on 
the device. 




The query returns 
a Cursor, just 
like the Cursor 
returned when you 
query a database. 



The contact store. 
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Update the code to use a URI 

The renderContact method is currently hard coded 
to display the no contact selected state. But you’re 
about to start populating the selected contact, so let’s 
make it clear when there is and when there is not a 
selected contact. Then you can start filling in the code 
when a contact is selected. 

Update the renderContact method to pass in the Uri. 
If the Uri is null (meaning no contact is selected) then set 
the name, phone, and photo view to display the no contact 
selected state you setup at the beginning of the chapter. 
Also update the onCreate to call renderContact 
with a null Uri (since no Uri is selected) and from 
onActivityResult pass in the Uri. 




Update renderContact to take 
a U r i . If that U r i is null, display 
the no contact selected state with 
the message to select a contact. Also 
update onCreate to pass in a null 
Uri and onActivityResult to 
pass in the Uri from the Intent. 



Pass ih the URI 

private void renderContact (Uri uri) { 

TextView contactNameView = (TextView) f indViewByld (R. id . contact_name) ; 
TextView contactPhoneView = (TextView) f indViewByld (R. id. contact_phone) ; 
ImageView contactPhotoView = ( ImageView) f indViewByld (R. id. contact_photo) ; 

Chedk -for a null URI- l-f null, 

if (uri == null) { thev-e must be no dontatt- 

contactNameView . setText ("Select a contact"); 

contactPhoneView . setText ("" ) ; Create helper methods -for 

contactPhotoView . setlmageBitmap (null) ; eadh data -field y ou want 




contactNameView. setText (getDisplayName (uri) ) ; 
contactPhoneView. setText (getMobileNumber (uri) ) ; 
contactPhotoView. setlmageBitmap (getPhoto (uri) ) ; 




ImCool.java 
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Then pass in a null UR I in onCreate (since there is no contact selected yet) 




public void onCreate (Bundle savedlnstance ) { 

super . onCreate (savedlnstance) ; 
setContentView (R . layout . main) ; 

renderCon tact (null) ; 

} K Pass in a null IX vi onCvcaic sinde 



And in onActivityResult, pass the URI to renderContact. 

protected void onActivityResult (int requestCode, int resultCode, Intent intent) { 

if (requestCode == PICK_CONTACT_REQUEST) { S 

if (resultCode == RESULT_OK) { 

renderContact (intent . getData ( ) ) ; 



toY\iaci has been seledted yet 




Pass the Uvi (the data *Pvom the 
intent) on to vendevContadt- 




Finally, create stub methods for the three display methods. You’ll be 
implementing these yourself! 



Stub method -Pov 
vetveivinj the display 
values -fov a dontadt- 



This method will vetuvn the 
display name -Pov the dontadt- 



private String getDisplayName (Uri uri) { return null; } 



This will vetuvn the M0B | LB 
numbev u the dontadt- 



private String getMobileNumber (Uri uri) { return null; } 



This last method will vetuvn 
the photo -Pov the dontadt- 



private String getPhoto (Uri uri) { return null; } 
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Start with the display name 



With that bit of code reorganization, you now have 
three contact detail methods to implement and the 
contact display will be up and running. Let’s start with 
getDisplayName. 



The three d-on-tatt de-tail 
aetess methods youVe going 
to implement- 



Start with implementing 
getPisplay/Vame. 



private String getDisplayName (Uri uri) { return null; 



private String getMobileNumber (Uri uri) { return null; 



private String getPhoto (Uri uri) { return null; } 



1 




ImCool.java 



So what does this method need to do? 



This method needs to retrieve the name of the contact. 

The display name is the name that displayed in the list 
of contacts that you selected. Scott selected Sam from 
his contact list, so this method should return “Sam” to 
display it on the home screen. This way Scott will know 
Sam is the selected contact that the app knows about. 

To get this to work, you’ll need to query the contact 
store and access the appropriate value in the Cursor. 

So, let’s get started! 

£in£e S^ott selected 

w £am w -from -the toniati 

lis-t, getDisplayName 

should vetu\rn Sam -from 
-the retrieved eontad: as 
positive rein-Poreement- 
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Query the contacts 

Think of the contact store like a database. In fact think 
of the device having a big database with all of the 
content you can access on the phone and the contacts 
are inside there. You need a way to query that database 
though, and that’s done with the Content Resolver 

You can retrieve the Content Resolver 
from your Activity using the Activity 
getContentResolver method. 



ContentResolver con ten tRe solver = 
getContentResolver () ; 

\ 



Then you can query the content provider passing in the 
Uri returned from the Contact selection screen. 



Us'mg the jetCointentResolvev" 
method to retrieve the 
default ContentResolver- 



The «\uery returns a Cursor 
just like a database <\uery. 



$uery the 
ContentResolver. 



Cursor cur = getContentResolver (). query ( 



) ; 



intent . getData , 

null , null , null , null 



Pass in the data 
-fv-or* the mte^t- 



The ContentResolver query return a Cusor, just 
like the cursor returned when you query a database. 



Now let’s see what content is in the Cursor. 
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Cursor contents 

Just like the Cursor database queries return, this Cursor 
is made up of a number of rows and columns. No 
columns were specified in this query so all the columns 
came back. This is resource intensive and you’ll want to 
fix this. But for now, let’s get the iteration working and 
then once you know the columns you need, you can 
query just for those. 



How do you figure out what columns are coming back? 

There are a few ways you could figure this out- you 
could write some code to print out the data or use the 
debugger. But before you do any of that, take a look 
at the documentation for ContactsContract . 

Contact. This class has a number of constants for 
the columns returned from the query, including one for 
DISPLAY_NAME which is what you’ll need to display 
in the contact name field. 



http : / / developer . android . com/ reference/ android/ provider/ ContactsContract . Contacts . html 



TV DISPLAY, 

NAM£ towfcawt 



Cl ContactsContract. C 



^»v.— 



CtHSv C) developer.android.com/reference/android/provider/ContactsContract.Contacts.html vQ" 







developers 



0 ( English ^ 



□ Filter by API Lev 



android .opengl 
android .os 



android.renderscript 

android.sax 



android.telephony 



android.telephony.gsrj ' 
android.test h 



==£| 

ContactsContractCon^ 

JSL 



Use Tree Nav gaton 



►From interface android.provider.ContactsContract.ContactStatusColumns 


▼From interface android orovider.ContactsContract.ContactsColumns 








(display_name) 


The display name for the contact. 


String 


HAS_PHONE_NUMBER 


An indicator of whether this contact has at least one phone number. 




String 


IN_VISIBLE_GROUP 


Lookup value that reflects the group visible state of any 
ContactsContract .commonDataKinds .GroupMembership for this 
contact. 






String 


LOOKUP_KEY 


An opaque value that contains hints on how to find the contact if its row 
id changed as a result of a sync or aggregation. 






String 


PHOTO_ID 


Reference to the row in the data table holding the photo. 






String 


photo_thumbnail_uri 


A URI that can be used to retrieve a thumbnail of the contact’s photo. 






String 


PHOTO_URI 


A URI that can be used to retrieve the contact's full-size photo. 

















Fields 

public static final Uri CONTENT_FILTER_URI 



The content:// style URI used for "type-to-filter” 
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Below is the updated renderContact method being passed in a Uri. If the 
Uri is not null, write the code to retrieve and set the display name on screen. 
To do this, you'll need to query the ContentResolver using the Uri 
passed in to renderContact. Then iterate through the cursor and retrieve 
the display name using constants. Remember, the ContactsContract . 
Contact . D I S P L A Y_N AME is a String. So retrieve the column index using 
the constant and retrieve the value. Also remember to use safe Cursor 
iteration and to close the Cursor when you're done. 



private String getDisplayName (Uri uri) { 

String displayName = null; 



Put youv dode m hev-e to 
c^uev-y “the dontadts us'rn^ 

c^r the Uv-i, iterate the dursor, 

a*d set the value (or the 
display *>ar*e on the sdreen- 



return displayName; 



showing the display name 




Below is the updated renderContact method being passed in a Uri. 
If the Uri is not null, write the code to retrieve and set the display name 
on screen. To do this, you'll need to query the ContentResolver 
using the Uri passed in to renderContact. Then iterate through the 
cursor and retrieve the display name using constants. Remember, the 
ContactsContract . Contact . DISPLAY_NAME is a String. So 
retrieve the column index using the constant and retrieve the value. 

Also remember to use safe Cursor iteration and to close the Cursor 
when you're done. 



private String getDisplayName (Uri uri) 

String displayName = null; 



$uery the dontadts with 
the uri passed in- Use 
jetContentResolver to 
retrieve a ContentResolver. 



Cursor dursor =■ jetContentResolverO.«^uery(uri, null, null, null, null); 

. p / r Move to the -first row o-f the 

* ( ^sor.moveToF,rst 0) { ^ ^ sbould 0h|y bc 0 , c ) 



£jet the string value -from 
the t^sor, but -first jet 
the dolumn inde* usinj the 
display name donstant- 



} 



displayName =■ dursorjet£trinj( 

dontadtCursorjetColumn|nde%( 

ContadtsContradt-ContadtsDlSPLAV^NAM^ 

) 

); 



dursordloseO; 



return 



displayName; 
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Tqst Drug 



Run the app now and select a contact. The display name should be updated. 



A 4* 



^ . ill® 8:01 pm 




After selecting a contact and 
going back to the main screen, 
the display name is populated 
with the selected contact. 



Looingf good! 



you are here ► 
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navigating contact data 



Pisplay the phone number next 

You’ve got the name displaying on the contact 
display on the main screen. This means you’re 
successfully selecting a contact, getting the 
selected contact back and retrieving data values 
from that contact by querying the contact store. 

Whew! 

Now you need to display the phone number and 
photo to complete the contact display. 



The donta^t na»*e is 
be'm^ set the 
selected dontadt- 



The phone number 
needs to be set- 




The photo still 
needs to be set- 



So what about these other fields? 
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m 

V, 



This should be super 
easy, right? Just need 
to get a few more values 
from the cursor? 




Actually, retrieving the phone and picture 
are going to take a little more work... 

Phone contacts can be a bit tricky. You can have 
multiple phone numbers (think home, mobile, office, 
etc), multiple addresses, etc. To handle this, contacts are 
actually implemented as separate rows. One row handles 
the main information for the contact (like the display 
name), and then there are multiple detail rows for the 
contact. 



Main dontafct 
in-formatior* 
display *ame. 




Multiple detailed rows o( 
dontadt in-formation. This 
indludes multiple phone 
numbers, addresses, email 
addresses, tit- 



Turn the page to see how access 
the detail contact rows? 



you are here ► 
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Accessing contact info details 

The general contact info row has some, but not 
all, of the information you need. This is pretty 
standard when you’re working with the device 
contacts. The general row is about enough to 
make a list of contacts but that’s it! 



The dowtewt -for the f hone numbers 
m -the toniati detail table- It Kas 
3 mi% o£ all different kinds o( 
numbers -for mu Itiple don-tadis. 



Contact 


Number 


Type 


Email j 


Ben 


555-716-9333 


Mobile 




Sam 


555-299-2354 


Work 




Alex 


555-243-9786 


Mobile 




Sam 


555-867-5309 


Mobile 




Sam 


555-998-9125 


Home 




Tom 






awesometom@gmail.com 



There are LOTS more 
dolumns at the end here .. 



So how to get these detail rows? 

The detail rows are also stored in the contact 
store and you can access them using another 
query to the ContentProvider. The 
ContactsContract . CommonDataKinds class 
contains a number of constants for working 
with these detailed rows. One in particular, 
ContactsContract . CommonDataKinds . Phone . 
CONTENT_URI, allows you to query just the phone 
numbers. All you need to do is pass in the Uri to 
the query method and you’ll only get back phone 
numbers. 
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Implement getMobilePhone 

Let’s put this all in context and implement the 
getMobilePhone method. This method needs 
to query the contact details for the mobile phone 
associated with the selected contact. It will query the 
contact store using the Uri from ContactsContract . 
CommonDataKinds referencing the phone content. 

Here is the method. 



private String getMobilePhone (Uri uri) { Pass in the Content 

String phoneNumber = null; /' Mvi Constant -for 

pbone numbers. 

Cursor phoneCursor = getContentResolver (). query ( j 

~ v " w 

ContactsContract . CommonDataKinds . Phone . CONTENT_URI , 

new String [] { ContactsContract . CommonDataKinds . Phone . NUMBER }, 

null, 
null, 
null 



Set tbe projection 
to tbe pbone number. 



1 



if 

Store tbe -f irst 
pbone number. 



(phoneCursor . moveToFirst () ) { 

phoneNumber = phoneCursor . getString (phoneCursor . getColumnlndex ( 
ContactsContract . CommonDataKinds . Phone . NUMBER) 



} Close tbe Cursor. 

phoneCursor . close ( ) ; 



} 


return phoneNumber; — 


pbone number. 









Something really important is missing from this method. Can you 
spot it? (Hint: Look closely at the Uri passed in to getMobilePhone) 




ImCool.java 



you are here ► 
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Pe selective with your contact query 

If you used the getMobile Phone method as is 
in your app, you’ll most likely get a phone number 
associated with a different contact than the contact 
selected. That doesn’t make for a very good method! 

The reason for this is that the ContactsContract . 
CommonDataKinds . Phone . CONTENT_URI used 
in the query refers to all phone records and you need to 
specify the contact you want. 



You can refine results by adding a select value 

There are additional parameters you can add to the 
query call that refine the results you’ll get back. One of 
these is a String selection parameter. It acts like a SQL 
WHERE clause in the underlying query to the contacts. 

And just like a SQL WHERE clause, you can include 
?’s in the select String. Using another constant from 
the ContactsContract, your select parameter will 
look like this. 



\l 

ContactsContract . CommonDataKinds . Phone . CONTACT ID + " 



Ano* ther donstant -from 
•the ContadtsContv-adt 
dlass -that allows you -to 
seledt a spedi*fid dontadt- 



With this select parameter, you also need to pass in an 
array of selection argument. These selection arguments 
will replace the ?’s in the select string when the query is 
executed. 



This is c^oin^ “to be “the IP 
(or *the dontadt 



This is -the IP *for 
' -the dontadt you 
want to seledt- 



new String [] { id } 



= ?" 




The only issue now is that you don’t have a reference 
to the contact ID in the getMobilePhone method. 

But don’t worry, you can query that too! 
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Select just the numbers for your contact 

Let’s update getMobilePhone now. It needs first query the 
contact store to retrieve the ID of the selected contact based 
on the selected contact Uri. Then use that ID and pass it in 
through the selection arguments in the second query. 



private String getMobilePhone (Uri uri) { 
String phoneNumber = null; 



Passing in a 
projection of -the 
£on-tad ID- This 

will return only 

£on-tact IDs 



This -piv-st 
guery reprieves 
•the main 

don-tact row, 

and -Prom -tha-t 
row you dan 
retreive the ID- 



Cursor contactCursor = getContentResolver (). query ( 

uri , new String [] {ContactsContract . Contacts ._ID} , 

null, null, null) ; 

String id = null; 

if (contactCursor .moveToFirst () ) { Retrieve the seledted 

id = contactCursor . gets tring ( dontadt^s ID- 

con tactCursor . getColumn Index (ContactsContract . Contacts ._ID) ) 

} 

contactCursor . close ( ) ; 



The sedond 
<\uer y 

retrieves the 
dontadt detail 
rows with 
the phone 
numbers o-P 
the seledted 
ondtadt- 



Cursor phoneCursor = getContentResolver (). query ( 

ContactsContract . CommonDataKinds . Phone . CONTENT_URI , 

new String [] { ContactsContract . CommonDataKinds . Phone . NUMBER }, 

ContactsContract . CommonDataKinds . Phone . CONTACT_ID + " = ? 
new String [] { id } , 

Pass in the seledt statement and 
seledtion arguments to seledt only phone 

. r ~ m ■ I , \ \ r numbers -for the seledted dontadt- 

if (phoneCursor .moveToFirst () ) { 

phoneNumber = phoneCursor . getString (phoneCursor . getColumnlndex ( 
ContactsContract . CommonDataKinds . Phone . NUMBER) 



null 




} 



phoneCursor . close ( ) ; 



return phoneNumber; 



you are here ► 
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Just a little more refining to do 



With the update of getMobile Phone to use a select 
statement using the selected contact ID, you’ll only retrieve 
phone numbers for the selected contact. This is good, 
but not good enough for you, a Head First rockstar! 

Here’s the catch. This current getMobile Phone 
implementation retrieves all phone numbers for the 
selected contact. But for this app, you only want mobile 
phone numbers! You can’t send a text message to a land 
line after all, so let’s make sure we retrieve just the mobile 
numbers. 



Now just Sa^'s detail rows are 
batk, but we want to 
narrow that down even more \ 
to just mobile pbone numbers. J 



Contact 


Number 


Type 


Email 


i 


Sam 


555-299-2354 


Work 






Sam 


555-867-5309 


Mobile 




! 


Sam 


555-998-9125 


Home 




i 







So the phone numbers 
are narrowed down to just the j 
selected contact. How do you 
make sure they are just mobile 
numbers now? 



Get more specific with your select statement. 

You’re already selecting phone numbers by passing in a select 
statement to the query. Now you need to get a little more 
specific and add a clause to that select statement that you only 
want to select mobile phone numbers. 



Luckily, there is a column referenced by the constant at 
ContactsContract . CommonDataKinds . Phone . 
TYPE that refers to the type of the phone number like 
mobile, home, or office. There are also constants for these 
different types in ContactsContract. The constant that 
refers to the mobile number type is ContactsContract . 
CommonDataKinds . Phone . TYPE MOBILE. 




456 



content providers 




Below is the query to retrieve the phone numbers for the 
selected contact. The second query from getMobilePhone. 
Update the code below adding a second clause to the select 
statement for the phone type to be mobile. Use and to join 
the clauses in the select statement. Use the constants from the 
Con tacts Con tract. 



Cursor phoneCursor = getContentResolver (). query ( 

ContactsContract . CommonDataKinds . Phone . CONTENT_URI , 
new String [ ] { ContactsContract . CommonDataKinds . Phone . NUMBER } , 



/\dd “to this selce-t 
s-tcrtemen't "to nav-vow 
-the vcsiaI'U down “to 
only mobile y bones. 



ContactsContract . CommonDataKinds . Phone . CONTACT ID + 



new String [ ] { id } , 

null 



you are here ► 
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Below is the query to retrieve the phone numbers for the 
selected contact. The second query from getMobilePhone. 

You should have updated the code below adding a second clause 
to the select statement for the phone type to be mobile. You 
should have used and to join the clauses in the select statement 
as well as using the constants from the ContactsContract. 



B%t end the 
select with AND- 



Cursor phoneCursor = getContentResolver (). query ( 

ContactsContract . CommonDataKinds . Phone . CONTENT_URI , 

new String [] { ContactsContract . CommonDataKinds . Phone . NUMBER 



ContactsContract . CommonDataKinds . Phone . CONTACT ID + " = ? 



Add -the -type 

Constant- 



+ ContactsContract-CommonDataKindsPhoneT YlP + ” — ” 



}, 

V 

AND " 
Add =• 

ton the 



£or*pa\rC- 

+ CohtadtsCohtvadtCommohData^’mds.Phohc.TypE^/WOBlLE, 



new String [] { id } , 

null -finally, add the 

? obi,e instant 
+o»r Comparison. 
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Tqst Drug 



Run the app and select the contact again, and you should see the 
display name and the phone number display for your selected contact. 




You’ve got two ol the three render Coni act helper methods 
working. You’re almost there! Vow it’s just that photo... 



you are here ► 
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displaying the contact photo 




m R ** s ^ Now show the photo 



There’s a great helper method for loading the photo for a contact in 
ContacsContact . Contacts called openContactPhotoStream. 
You’ll need to pass in the Content Resolver and a Uri. Notice that 
this Uri is using the ContentUris . withAppendedld. This is slightly 
different from the other Uri you’ve been using as it’s actually generating 
a new Uri based on a stored constant plus the ID you’re passing in Check 
out the online documentation for details. 



String id = null; 

Cursor contactCursor = getContentResolver (). query ( 

uri, new String []{ ContactsContract . Contacts ._ID} , null, null, null); 
if (contactCursor . moveToFirst () ) { 

id = contactCursor . getString ( 



contactCursor . getColumnlndex (ContactsContract . Contacts ._ID) ) ; 



try { 

InputStream input = 

ContactsContract . Contacts . openContactPhotoInputStream ( 



private Bitmap getPhoto (Uri uri) { 
Bitmap photo = null; 



A similar <\uery to ^etAlobilePhone to retrieve the IP • 



contactCursor . close ( ) ; 



Create a* InputStream 
using -the helper method. 



getContentResolver () , 



ContentUris .withAppendedld ( 

ContactsContract . Contacts . CONTENT_URI , 
new Long (id) . longValue ( ) ) 



) ; 




. Use Bi-Uapf'afrtov-y to detode -the 



if (input ! = null) { / stream into a real, live 

photo = BitmapFactory. decodeStream (input) ; 



input . close ( ) ; 

} catch (IOException iox) { /* exception handing here */ } 



return photo; — _ Return the photo bitmap. 
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Test Drove 



Run the app and select a contact one last time. You should see all three 
fields update- the display name, the phone number AND the photo. 




you are here ► 



461 








sending a text message 



fretting ready to send the text message 

The last feature to build before you can give the 
app to your users for testing is to send the text 
message. Pressing the “I’m Cool” button should 
trigger the text message, so before going any 
further, let’s add anonClick attribute to the I’m 
Cool button on screen and invoke a method called 
onlmCoolButtonClick in the Activity 
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How to send a text message 

Sending a text message on Android couldn’t be easier. There 
is a class called SmsManager with a method that sends a 
text message. As long as your app is configured with proper 
permissions to send text messages (using the android . 
permission . SEND_SMS permission) you can send text 
messages to whoever you like! 

Take a look at the sendTextMessage method. 



The phone number 
■to send -the text 

message -to. 



The message te*t- 



These are special 
intents 'that £3* 
be activated like 
tallbatks. You won t 
need to use them 
-for basit te*t 
message sending. 




sendTextMessage ( 

String phoneNumber , 

String serviceCenterAddress , 
String text, 

Pendinglntent sentlntent, 
Pendinglntent deliverylntent 






Watch it! 



Make sure to add the send_sms permission. 

If you don’t add the SEND_SMS permission to your app and 
run it on a device, you’ll get an error about missing permissions. 
Stop now and add the android. permission . SEND_SMS 
permission to your AndroidManifest. xml file. 



you are here ► 
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Add the action method for the I'm Cool button 

Let’s make one small change to your Activity to 
send text messages. Right now, the contactUri is 
used to update the display after selection, but it’s not 
stored anywhere. For now, store the contactUri 
in your Activity as an instance variable. 




Now store the Uri of the selected contact when 
it’s passed back from the contact selection in 
onActivityResult. This way, you’ll be able 
to call getMobile Phone to retrieve the selected 
contact’s phone number to send the text message. 



B 

protected void onActivityResult (int requestCode, int resultCode, Intent intent) { 
if (requestCode == PICK_CONTACT_REQUEST) { 
if (resultCode == RESULT_OK) { 

contactUri = intent . getData ( ) ; 

renderContact (contactUri) ; 

} 

} 




ImCool.java 



Cache the loniatiUri 
■Bidi £or*es badk -(Vom 
the toniati selection. 
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Poo] Puzz]e 




Your job is to take the code fragments 
from the pool and place them into 
the empty onlmCoolButtonClick 
method. You may not use the same 
code fragment more than once, and 
you won't need to use all the code 
fragments. Your goal is to make the 
onlmCoolButtonClick send the 
text message to the selected contact. 



public void onlmCoolButtonClick (View view) { 



Note: each thing from 




you are here ► 
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wrapping up 



Poo] Puzz]e 




Your job is to take the code fragments 
from the pool and place them into 
the empty onlmCoolButtonClick 
method. You may not use the same 
code fragment more than once, and 
you won't need to use all the code 
fragments. Your goal is to make the 
onlmCoolButtonClick send the 
text message to the selected contact. 



public void onlmCoolButtonClick (View view) { 

SmsManager smsManager = SmsManager . getDefault () ; 

smsManager . sendTextMessage ( 

getMobilePhone (contactUri) , 
null , 

"Babe, I'm Cool! " , 

null , 
null) ; 

} 



Note: each thing from 
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G® Off Piste 

Now that you have the hang of ContentProviders, 
here are some other cool things to look into. 



Photo and Video 



/Wd'»o Content 



Using the same Y«* 

learned seardhing W 
you dan load audio W 
the androi d^ovider-MediaSW- 

Audio U-^ mW-aW O. 

loading ?ty , ' ,sts> alWm 

to v^ and -re. r Data 



Loading photos and videos -from 
the device works in a similar way 
too. Chedk out A1ediaStov-e. (mages 
and MediaStoveVideo for move. 



Content providers aren't just read 
only, you dan modify dontent too. 
por example, writing or modifying 
a phone number, adding a new 
photo, and more* Chedk out the 
dods -for more information. 



Many, many, more... 

Take a look at the android- 
provider package -for even more 
don tent you dan addess -from your 
apps. 



Write your own/ 

l-f you have data in your app 
that you'd like to share with 
other apps, you dan build your 
own dontent provider that 
other apps dan guery. Take a 
look at http ; / / developer android- 

dom/ guide/ topids/ providers/ 
dontent-providers.html -for more 
in-formation- 



you are here ► 
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picking the important stuff 



Your Android Toolbox 

The app is now functional! 

You implemented contact 
selection using native behavior 
queries all of the contact 
details to render in the display. You 
also implemented text messaging and 
tested on a real world device. 



Invoking «atWe behavior 

. |„W* ca„ iMokt 
or a Wri/AtW dombmaW 1+ 7 0W 

pas in this UV./AtW Commfeo, the OS 
deWmes the most appropriate Activity 

to respond to the Intent- 
9 Use Constants Pv-om Intent &*• 

Uris and Actions 

$ Use startAttWity 0,r , r 

startAttWityforRes.lt as needed tor your 

a??- 

— ^ucvying Cor\iatis 

» Mse ContentResolver and Constants -Prom 
ContaetsContraet to guery Contacts. 

• scmcval Contact in-Pormation 
usin 9 the ^Jl Contact Uri returned -Porm 
selecting a Contact 

• Q^y ^iaci details with the help oP 
Contact Constants in ContactsConstract 
subclasses 

• ^e-f'^e your queries with select 
statements to get the data you want 






BULLET POINTS 



■ Use native behavior by invoking an 
Intent with Actions and Uris 

instead of explicit Activity references. 



■ Check the online documentation for 
intent to see which Uris have native 
responders. 



■ Use constants for Actions and Uris 
whenever possible. This way you’ll be 
prepared when things change. 



■ Make sure to add the appropriate 

permissions for your app, this one needed 

READ CONTACTS and SEND SMS . 



■ Sometimes it’s easier to test on the 
emulator and sometimes it’s easier to test 
on hardware. Do what makes sense for you 
app. And make sure not to only test on the 
emulator since you’re deploying your app to 
the real world, NOT the emulator! 



■ Contact information is located in an on- 
device data store you can query like a 
database. 



■ Contact queries return Cursors, just like 
a database query. 

■ Contact information is stored in spearate 
records for main contact information and 
contact details. 



■ Query contact (and other OS stored 
information) information using 

ContentResolver. 



■ Easily send text messages from your app 
using SmsManager (and adding the 
send_sms permission) 
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12 advanced graphics 





With all the competition in the marketplace, your apps need to 
do more than just work... they need to look great doing it! For 

some of your more basic apps, using the stock Android look and feel is fine. But when you 
want to built great looking apps that really wow your users and customers, you’re going 
to need to need to use graphics. In this chapter, you’ll learn two advanced techniques 
for adding images to your apps. First you’ll learn how to use images on your buttons. 

Then you’ll learn how to use special resizable images that will really help your apps look 
fabulous on all kinds of different screen sizes. 



this is a new chapter 
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updating the design 



It needs to be even better 

Sam dropped in while you were finishing up the 
message sending and asked for a quick look at the app. 
After showing it to her, it became clear that function 
alone is not enough. It needs to look great too. 




Good apps need good graphics 

You might be a strong engineer and a great graphics 
designer. And if you can design and build your 
own apps, this is where you’d open up your favorite 
graphics tools and create some great graphics to 
make the app look super slick. But if you’re like the 
rest of us, you’re going to need some help. 

Don’t worry though, with the super high quality 
graphics in even the most basic apps, getting outside 
graphics help is pretty standard these days! 

Let’s see if there is anyone who can 
help us out with this... 
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advanced graphics 



Meet the Head First Graphics Team 



Turns out there’s a great group of graphics 
artists just dying to help you on your latest 
project! They just need you to send them 
an email describing what you need. 



Here’s your email to the 
Head First Graphics Team 





flOO 




Delete Junk Reply Reply All Forward Print To Do 



Me 

Help! I need some graphics 
Today 

Head First Graphics Team 

Hi Head first Graphics Team! Thanks for offering to help. 

I m building an app with a contact’s picture displayed. But I need something to use 
when they don t have an image set. (Think of an avatar placeholder image). Do you 
think you could make something work? 

If so, and since this is Android supporting different device sizes, could you send me the 
image in three sizes... one for small, medium and large phone screen sizes? 

Thanks! 



you are here ► 
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how to make it happen 



Give the app some polish 

The Head First Graphics Team just got back to you 
with a sketch of how to update the design of the 
app. Let’s take a look at their design and see what it 
would take to implement it. 



ftOO 

c 0 g-'* j v- ^^3 

Delete Junk Reply Reply All Forward Print 

Head First Graphics Team 
Help! I need some graphics 
Today 
Me 

Sure! Anything to help :-) 

Here’s a mockup of the app the way we’d like to see it! 
Some cool graphics spread around the app to make it 
look super cool for Sam and Scott. 




( -j 



I'm Cool! 



Pi 



Now let’s see what needs to be done to 
make your app look like this picture. 
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Use button images... 

This design uses custom images for both the Update Contact and I’m 
Cool buttons. You’ll need to update the current buttons to use images , 
and you’ll need to get those image resources (the actual images for the 
buttons) from the Head First Graphics Team. 




Use a too I 
background irwa^e- 



...and use a background image 

This design has a background image that stretches across the entire screen. 

You’ll need to get this image from the graphics team and set it on the 
background. The issue here is that you don’t really know the actual 
size of the screen. Even if you know the screen grouping, the actual 
screen might be a a few more or less pixels than you’re expecting. To solve 
this, you’ll need to use a special kind of image that can resize. 

Turn the page to get started 



you are here ► 
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Use image buttons instead of plain, boring ones 



Let’s start implementing the Head First Design 
Team’s graphical update by adding the images for 
the buttons. 



Android provides a special button View called 
ImageButton specifically for buttons with images. 

To use ImageButton, just declare a View of type 
ImageButton and instead of setting the text, set 

the android : src attribute to reference an image. The android : sr£ 

attribute should 
re-ferende an ima^e 



The view t/?e ,s 
ImageButton 




< ImageButton 

android : layout_width="wrap_content" 
android : layout_height="wrap_content" 

android: src="0drawable/my image name' 



/> 



Before you can add the ImageButtons to your layout, 
you need the images to use. Time for another email 
to the Head First Graphics Team asking for images 
from their mockup. 




Your latest email to 
the yaphies team. 



«oo 
C9 w 

Delete Junk 



Reply Reply All Forward Print To Do 



Me 

Help! I need some graphics 
Today 

Head First Graphics Team 

Hi again Head first Graphics Team. 

The design you sent over with the added graphics looks fantastic! I’m working on the 
image buttons now. Can you cut those out and send me PNG files for them? 

Thanks! 
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Add the images to your project 

The Head First Graphics Team got back to you and 
sent you two images. Add them to your project under 
the res directories in drawable-hdpi. 



Wore s your reply -from 

the graphics ieaJ 



«oo 








m 


C ' ~c * A C ^ A r yj i 


Delete 


Junk 


Reply Reply All Forward Print To Do 



Head First Graphics Team 
Help! I need some graphics 
Today 
Me 



Sure! Anything to help :-) 

Here are the images you asked for. Let us know if this works. 




drawable-mdpi 



a 



Watch it! 



Make sure to cover ALL of the 
screen resolutions you’re 
targeting. 



drawable-ldpi 



This chapter is just targeting high 
resolution screens. As you’re 
building your own apps, you’ll need to add the 
button images for each resolution you’re targeting. 
You can still use just one selector file though. 



you are here ► 
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Add the ImagePutton 

With the new button images added to the res directory, 
update main . xml replacing the regular Buttons with 
ImageButtons. Set the android: src attribute to the 
names of the images you added from the graphics team. 
Also, remove the android: text attributes from both buttons 
since the images both have styled text embedded in them. 



Charge “the view 
type to Ima^eButto*. 

< ImageBu tton android: id="@+id/update_contact" 

android: layout_width="wrap_content" remove the 

android: layout_height="wrap_content" android : te%t 

android: text="Update Contact" 
android: layout_below="@+id/ contact_phone" 
android: layout_alignLef t="@+id/ contact_name" 
android : layout_marginTop="10dp" 

android : src="0drawable/update_contact_btn_bkg' 

/> 



Change the view 
type to ImajeButto*. 




< ImageBu tton android: id="@+id/im_ok" 

android : layout_width="wrap_content" 
android : layout_height="wrap_content" 
android : layout_center InParent="true" 
android: tex ' m Cool ! " 
android : src="0drawable/im_cool_btn_bkg 
/> 



Set the a*dv-oid:sv-t to 
the names ox the images 
you added (without the 
pn^ extension) 



main.xml 
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Tqst Drove 



Now that you have the images added to your project and the 
ImageButtons added to your layout, run the app and see how it looks! 





^ Wow, those borders are 
looking pretty crazy! And when 
^ I press them they glow. What's 
0 going on there? 



1 /Vhen you press a button, 
the $ray border turns 
a dolor so you know it s 
bein$ pressed- 



Select a contact 






The images are displaying, but you’ve got some cleanup to do. 



you are here ► 
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getting rid of the border 



Remove the background 

The image on an ImageButton doesn’t cover the entire 
button. The ImageButton has a default background and 
the image you set in the android: src attribute is drawn 
on top of it. That’s why you have that weird border. If you set 
the background to null, you’ll just see you’re image. 



<ImageButton android : id="@+id/ update_contact '■ 

android : background="null" 



Set both 

andv-oidtaekjyround 
attribute values to 
null- 






<ImageButton android : id="@+id/ im_cool'' 

android : background="null" 



XML 



Now take a look back at the app, and notice that the 
ImageButton borders are gone. All you can se now is the 
image drawable from the android: src attribute. 



main.xml 




There's a lurking problem 
though. Try pressing one of 
the Image&uttons now... 
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Uggghhhh! Now the ugly 
border is gone but you 
can't tell when the button 
is pressed. Lame! 



Lame, yes. But fixable! 

By default, the button indicates it’s being pressed by 
changing the background to orange. The indication that 
the button is pressed is really important for your users, 
but the big gray box around your great new images looks 
awful! What to do? 

The solution is to have two different images: one for when 
the button is pressed and one for when it isn’t. And since 
you need more images, that can only mean one thing... 
another email to the Head First Graphics Team! 






/Uothev email -to "tKe 
(yraphids -team- 




«oo 



< s a 

Delete Junk 



Reply Reply All Forward 



Print 



To Do 



From 

Subject 

Date 

To 



~~ Me 

Help! I need some more graphics 
Today 

Head First Graphics Team 



Hi Head first Graphics Team! 

It turns out I need separate images for the button in pressed and non-pressed states. 
Can you send me images for those two buttons in their pressed states? The ones you 
sent before will work for the unpressed states. 



Thanks! 



you are here ► 
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Add the (new) images to your project 

Looks like Head First Graphics Team just got back 
to you! Let’s plug in the images they sent back. 



□ 



res 



drawable-hdpi 



m 

drawable-mdpi 



«oo 
o w 

Delete Junk 



Reply Reply All Forward Print To Do 




Head First Graphics Team 

Re: Help! I need some more graphics 

Today 

Me 

Hello again! 

We added some highlighting to the non-pressed images. This 
should make it clear when they are pressed and not pressed. 

Let us know if you need anything else, and good luck with the 
app. 



Update Contact 



update_contact_btn_ 
pressed. png 



I'm Cool! 



im_cool_btn_pressed. 

png 



o 

drawable-ldpi 



Using different images for button states 

There is only one attribute - androidisrc - to 
set the image on an ImageButton. But you want 
to use two different images: one when the button is 
pressed and another one when the button is in it’s 
normal state. You could add a listened to the button 
and change the image displayed when pressed, but 
there is a much easier way! 
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Use selectors to control button images 

Selectors allow you to define multiple images to use for 
buttons based on state. Selecters are implemented as 
XML files with elements inside the file referring to specific 
states, and which image to use for that state. Then you can 
set the selector as the drawable instead of a specific image, 
and the ImageButton will automatically select and 
update the image according to its state. 



o 



When the button is not pressed 



The selector returns the default button image when the 
button is NOT pressed. 



Is the button 
pressed? 



No 




© 



When the button is pressed 

The selector returns an alternate button image when 
the button is NOT pressed. 



Is the button 
pressed? 







im_cool_btn_pressed.png 



Return a 

selected image- 



you are here ► 
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Make a new selector file 

Start by making a new selector XML file. You can 
create one using the same wizard that you use to 
create new Android layouts and other XML files. 
Select File — > New — > Android XML File to 
launch the wizard. 



Name *tbe file 
button im £ool%ml 



Alake sure your £urrerrt 
project is selected- 



New Android XML File 

Creates a new Android XML file. 

Project Chapter 11 -Babel m Cool 




b Litton _i m_coo I .xm I 
What type of resource would you like to create? 

O Layout 0 Values 

O Color List O Animator 

O Preference 0 5earchable 

What type of resource configuration would you like? 



■ Drawable 
0 Animation 



Select tbe 
drawable 
radio button 




0 Menu 

0 AppWidget Provider 





Folde r / res / drawa ble 



Select the root element for the XML file. 




£ele£-t selector 
-from *tbe dropdown- 
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Where is the selector file? 

The new empty selector XML file was created 
by default in the res/drawable directory 





drawable- 

hdpi 

— 



1 






Selectors are just pointers to files, and the 
Android runtime finds the right ones. 

By default, Android looks in the drawable directory fro the 
selector files. But when it comes to loading an image, the Android 
runtime tries to load images first from the resource folder specific 
to the screen size group. So in this case, the selector XML can 
live perfectly happy in the drawable folder and be found by the 
runtime. But when an image gets loaded, the runtime starts by 
looking in the drawable-hdpi folder (assuming you’re running on a high 
resolution device) and loads the image from that folder. 



you are here ► 
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Open the new selector file 



Navigate to res/ im_cool_button . xml and 
double click to open it. The autogenerated file 
starts out with an empty selector. 
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Add the image pointers 

The autogenerated selector is empty and 
you need to add the links from specific states 
to the images that should be displayed for 
them. You’re going to need two image/ state 
combinations: one for when the button is 
pressed and one when it’s not. 




png 

Add items to the selector 

Linking a state to a drawable inside selectors is done 
by defining <item> elements. Here is an item 
element that will render the im_cool_button . 
png image when the button is pressed. 



This fter* is in 
etfedi when -the 
button is pressed- 




citem android: state_pressed="true" 

android : drawable="@drawable/ im_cool_button" / > 

— \ — — — 

\ Display *the ir*_dool — 

button drawable when 
•the rtem is in etfedt 



you are here ► 
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updating the selector 



f ^ , Selector Magnets 




Below is the empty selector from button_im_cool . xml. Use 
the code magnets to add two items to the selector. Add one item to 



show im_cool_btn_bkg . png when the button is not pressed. 
And add another item to show im_cool_btn_bkg_pressed . 
png when the button is pressed. 



<?xml version="l . 0" encoding="utf-8"?> 

<selector xmlns : android="http : // schemas . android . com/ apk/ res/ android"> 



Add -the -Uo 

I'bcw'S heve- 



</ selector> 




XML 



button_im_cool.xml 





<item 



android: state_pres sed=" false" 
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(jeejc Bits 



This selector will only work on devices that fall in the HDPI category 
This is fine (for now) since we know Sam and Scott both have HDPI 
Android phones. With that in mind, you should do careful analysis of 
your target users and make sure to cover their devices as well. 



Here are some tips to cover as many devices as possible. 



o 




Put default drawable images in drawable 

The other folders contain device group specific 
images. But if an image resource isn’t found 
for the specific device group (or a new group is 
introduced) the Android runtime will check here. 






Add images for each screen group 

Each screen grouping will try and load its pecific 
images. Make images for every group and add 
them to appropriate folder. 



Look for new screen groups 

With the addition of tablets and larger phones, the 
number of screen groups is growing. Keep an eye 
out for these new groups and make sure you have 
the resources you need for these groups. 



And remember, you don’t need resources for every single resolution. You might find that 
with flexible layouts and decent scalable images, you can get away with really great 
hdpi and mdpi images and you’re all set. Don’t do more work then you have to, but 
do make sure your app looks great on all devices. 



you are here ► 



487 



using the selector 




Selector Magnets Solution 

Below is the empty selector from button_im_cool . xml. You 
should have used the code magnets to add two items to the 
selector. The first item should show im_cool_btn_bkg . png 
when the button is not pressed. And the other item to show im_ 
cool_btn_bkg_pressed . png when the button is pressed. 



<?xml version="l . 0" encoding="utf-8"?> 

< selector xmlns : android="http : // schemas . android . com/ apk/ res/ android"> 

This item is in etfefit when -the button is HOT pressed, 
and it displays the im_eool_btn_bkg dv-awable- 

<item and roid: state_pressed="false'^ | 

android: dr awable="@ dr awable/im_cool_btn_bkg^J /> 



This i-ter* is in e-P-Pe^t when -the buttis is pressed, and 
i*t displays -the irw^eool^b-tn^bkg^pressed drawable- 



Citem 


[ android: state_j?ressed="true"J 


1 




android : drawable=" ©drawable/ im_cool_btn_bkg_j>res sed" 




</ selector> 



button_im_cool.xml 
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Set the selector as the button's drawable 

The selector is a drawable, so you can set it as the 
background just like using an image. The last step 
before testing the selector is to set the android : src 
attribute on the ImageButton to the selector 
instead of pointing directly to an image drawable. 



CImageButton android : id="@+id/ im_ok" 

android : layout_width="wrap_content" 
android : layout_height="wrap_content" 
android : layout_centerInParent="true" 



android : src="0drawable/button_im_cool' 

android: background="@null" fd 
/> 



</RelativeLayout> 



Se-t the selefrtov- as -the drav/able 
u -the UayBuUw sv-t. 





main.xml 



tlieretare nQ 

Dumb Questions 



% These selectors look cool, but what if I want to use a 
different image when the button is, say, disabled? 



O: Oh cool. But what if I want to combine then? Say I want 
to use one image when a button is disabled and pressed. 



1 \ I Pressed isn’t the only state you can use for your selectors. In 
addition to pressed, you can also create items referencing focused, 
selected, checkable, checked, enabled, and window focused 
states. Whew, that’s a lot of states! . 



I No problem! You can combine as many states as you want 
to in a selector item. Just add additional attributes to the item you 
want to configure with multiple states and you’ll be all set. 



you are here ► 
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Tost Drwq 



Now that you have the selector in place, run the app and see how the 
“I’m Cool!” button looks when pressed and not pressed. 




Select a contact 



1/Vhen -the button 
isn t pressed, it 
looks just like it 
did be-fore- 




But when the 

button is pressed, 
it automatically 
switches to the 
pressed image/ 



Looks great! 



Add the selector for the update contact button 



Now that the Button images are working 
for the I’m Cool button, let’s add another 
selector for the Update Contact button. 
Start by adding a new selector XML file 
called button_update_contact . xml. 




Run the new Android XML file 
wizard again and create a new selector 
selector XML file called button_ 
update_contact . xml. 
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Below is the empty selector for the update contact button. Add two items to that selector 
for the pressed and unpressed states as well. The unpressed state should point to update_ 
contact_btn_bkg . png and the pressed state should point to update_contact_ 
btn_bkg_pressed . png. When you're done, update the snippet from main .xml below 
to use your new selector. 



<?xml version="l . 0" encoding="utf-8" ?> 

<selector xmlns : android="http : / / schemas . android. com/ apk/ res/ android"> 



</ selector> 



Add items here -for the unpressed 
and pressed button states. 




button_update_ 

contactxml 



<ImageButton android: id="@+id/update_contact" 
android : layout_width="wrap_content" 
android : layout_height="wrap_content" 
android: text="Update Contact" 
android: layout_below="@+id/ contact_phone" 
android : layout_alignLef t="@+id/ contact_name' ; 
android: layout_marginTop="10dp" 

android: background="@ null" 

/> 



Set the drav/able 
to selector. 




main.xml 



you are here ► 
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adding another selector 




EmctSe 
)OLot\OH 



Below is the empty selector for the update contact button. Add two items to that selector 
for the pressed and unpressed states as well. The unpressed state should point to update_ 
contact_btn_bkg . png and the pressed state should point to update_contact_ 
btn_bkg_pressed . png. When you’re done, update the snippet from main . xml below 
to use your new selector. 



<?xml version="l . 0" encoding="utf-8"?> 

<selector xmlns : android="http : / / schemas . android . com/ apk/ res/android"> 

ahd\roid:s*ta*tc_prcsscd=- W 'falsc w 

) Two rter*s, -fo\r 

a^dvoid^drawablc— W @drawablc/ upda*tc - _doh*tad*t - _b'tr\_bk^ / > pressed a^d 

unpressed s-taies. 

<i*tem android^state^pressed—’true” like tbe I ** 

Cool button- 

android:drawable— u $drawable/ update^dontadt^btr^bkgjressed” /> 

</ selector> 







button_update_ 

contact.xml 



<ImageButton android : id="@+id/ update_contact" 
android : layout_width="wrap_content" 
android : layout_height="wrap_content" 
android: text="Update Contact" 
android: layout_below="@+id/ contact_phone" 
android : layout_alignLef t="@+id/ contact_name" 
android: layout_marginTop="10dp" 

ahdroid^vd-^drawablc/bu't-to^upda'tc^doh'tadf 

android : background="@null" 

/> 



£e*t *tbe android : srd 
attribute *to *tbe 
selector as i*ts drawable- 



main.xml 
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Tost Drii/q 



Run the app now and pay close attention to the two buttons. Press and 
unpress the buttons a few times and watch their states go back and forth 
from pressed and unpressed, changing images between the two PNG 
files as the states change. And all you had to do was make a selector! 




Great work! 






I/Vhen you di£k ok "the 
T* Cool/” bu-bfcon, -the 



bu-bfcon changes 
■thev-e -too. 



you are here ► 
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setting the background 



Now for the background image 




Put there's a problem lurking. 



The Head First Graphics Team sent you a 
background image that is 300x300 pixels. But 
Android devices can be all kinds of different sizes! 
Android can resize the image, but this resizing can 
make your images look pretty bad with default 
stretching.. Just take a look: 




■efeJt way 
nd tain ?<asV> amd ?«'' 
ouv ways im 'Na'/s that 
„ake them look tumble! 
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Wouldn't it be dreamy if there was 
a way to make images look great on all 
different sizes of Android devices. But I 
know it's just a fantasy... 



you are here ► 



495 



using 9-patch images 



Use 9-patch images... 



You can use a technique called 9-patch images 
to really help deal with these variances between 
screen sizes. 9-patch images work by specifying 
vertical and horizontal stretching sections not 

the entire image. 



This sedtion dan 
stretdh width 



AND height 




This sedtion dan 
stretdh width only. 



This sedtion 
I doesn't v-csiz^. 
ML 



This sedtion dan 
^stretdh height 
nly. 



This sedtion 
doesn t resize 



This sedtion dan M 
stretdh height only. 



ill 



doesn't resize- 



This sedtion 
doesn t resize- 



This sedtion dan 
\resizje width only. 



Then, when the image needs to be resized, it only resizes 
the portions you’ve specified can be stretched either 
vertically, horizontally, or both. 
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... which can look great when resized! 

The image can be resized as needed, but since the areas 
specified scale well and can be stretched, the image looks 
great in all of these sizes. Here are extreme stretched 
versions of this image as the size of the background in 
portrait and landscape mode. 




Look hov / -the 'sky section y/3s vertically 
stretched a lot, Wt since its a part o* 
the in>ay that can stretch .t . M looks 
ftreat 1 The cloud also horizontally fetched 
a little and still look $reat- All and all, the 



Here is the irwa^e siz^d a landscape 
baekyound- The vertical sky part stretdhed 
a little bit, but the dlouds stretdhed a TON 
horizontally... but still looks <yreat! 




creating 9-patch images 



Making your own 9-patch images 

Making your own 9-patch images is a snap, 
but you’ll need to follow a little process to do 
it. Here is what you’ll need to do. 



o 



Get a raw PNG image 

9 patch images start with plain old PNG 
images. The only thing special about these 
images is that they have to resize well based 




PNG 



my_pic.png 



Edit the PNG in Draw 9-patch 

Draw 9-Patch is an application that 
comes with the Android SDK. Using this 
application, you can define the resize points. 




O Use the 9-patch image 

Once you save a 9 patch image 
from Draw 9-Patch, it works just 
like a regular drawable that you can 
use in your XML files. 



The 7 beW 
-the {>*5 lets 
you know its a 
^-patch image- 





my_pic.y.png 




Choosing Images Iff Close 



Using 9-patch images works really 
well, but only for images that have a 
stretchable area. For this to work, you’ll 
need a section that can be stretched 
horizontally, a section that can be 
stretched vertically, and they have to 
intersect. 




This image has 
a stretchable 

r - horizontal and 

vertical section 
MV they 
intersect- 



This image doesn't have any 
stretchable sections. Adhere 
you try and stretch this image 
will look distorted- 
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Open Praw 9-patch 



The draw9patch application is location in 
your <android_home>/ tools directory 
You can launch it by typing at the command line 
<android_home>/tools/draw9patch. 




You wor/t have to erv ter the 
-Pull path t o the and (void hor»e 
i-P you add it to your path. 



When draw9patch opens, you’ll see this empty 
screen since there is no 9-patch image opened yet. 
From here, you can open a plain PNG file to create 
a new 9-patch image, or an existing 9-patch to edit. 




you are here ► 
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adjusting the patches 



Open your PN(r 
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Adjust the path bounds 



The path bound are what control the 
different patches of the 9-patch image. Draw 
pixels on the left, top, right and bottom edges 
to add to the resizing sections. 




■ Show contenr 



Q Show patches 



X: 279 px 



The / pixel black 

lines oh the edges ot 
the image mark the 
stretchable area. 



pra* the lines on the 
edges to mark the 
stretchable areas. 



On the right you'll 
see a previews ot the 
image stretched. 



Draw 9-patch: /Users/jona^h ansimon/Dropbox/HFAD-Personal/workspace/Chapterll-BabelmCool/res/drawable-hdpi/skateboard_background.9.png 
Press SlVft to erase pixels Sho\w>ad patches 



This Stretched 
image looks 
WAY better! 



800% ■ Show lock 



. Alake sure to select 
w £how Patches" to 
get a preview ot the 
stretchable patches. 



you are here ► 



501 





use the 9-patch 



Add the 9-patch image to your project 

From inside draw9patch, go to File — ► Save 




drawable-ldpi 



After you add the 9-patch image file to your project, 
you’ll see an updated R file including a @drawable 
constant for your new 9-patch image. 




Watch it! 



Make sure skateboarcLbackground.png isn’t in your 
project when you try and save the 9-patch. 

The 9-patch drawables are not unique, they are just drawables 
with special extensions. As far as the Android runtime is concerned, 
skateboard_background.png and skateboard_background.9.png are 
the same drawable resource (they just act different in the running app). So if you 
already added skateboard_background.png to your project, make sure you delete it 
before adding saving the 9-patch image or you’ll get a nasty error! 
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Use the 9-patch image in your layout 

Once you have the 9-patch image added to your 
project, you can use it like any other drawable. You 
can set it as the android : src of an ImageView or 
ImageButton, or the android : background for a 
other Views. 




Below is the beginning of the main RelativeLayout for the main screen. Set the 
background of the layout to your new 9-patch image using the android : background 
attribute. This will set the 9-patch image as the background for the entire screen. 



<?xml version="1.0" encoding="utf-8 " ?> 

<RelativeLayout 

xmlns : android="http : / / schemas . android. com/ apk/ res/ android" 
android: layout_width=" f ill_parent" 
android : layout_height=" f ill_parent " 

> 



<TextView android : id=" @+id/ contact_name" 

android: layout_width="wrap_content " 
android: layout_height="wrap_content" 
android : layout_alignParentTop="true" 
android: layout_alignParentLef t="true" 
android : layout_marginLef t="20dp" 
android : layout_marginTop="20dp" 




you are here ► 
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Exercise 
§OLut»OH 



Below is the beginning of the main RelativeLayout for the main screen. You 
should have set the background of the layout to your new 9-patch image using the 
android : background attribute. This will set the 9-patch image as the background for the 
entire screen. 



<?xml version="1.0" encoding="utf-8 ” ?> 

<RelativeLayout 

xmlns : android="http : / / schemas . android. com/ apk/ res/ android" 
android : layout_width=" f ill_parent " 
android: layout_height=" f ill_parent " 

> ar\dv-oid : badk^v-ouKd— ”@drawable/skateboard_badkgv-ouKd” > 



<TextView android: id="@+id/ contact_name" 

android: layout_width="wrap_content " 
android : layout_height="wrap_content " 
android: layout_alignParentTop="true" 
android : layout_alignParentLef t=" true" 
android : layout_marginLef t="20dp" 
android: layout_marginTop="20dp" 



Sei the andvoidtafckfyround 

yvoyevty to the ‘J-patth 
dva>wablc. 
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advanced graphics 




Drws 



Now that the 9-patch image is set as the background, run the app 
and see how it looks! 




The batk<yrou*d 
ima^e looks tyrea-t! 



^"hesc ^ompoheh-t 
posi-tiohs look aw-ful/ 
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Wow, that looks 
TERRIBLE! What is 
going on with that 
CRAZY positioning? 




adjusting the layout 



Adjust the padding 

Usually padding isn’t an issue with 9-patch images and you 
can easily use them as backgrounds for ImageButtons 
and other Views. But when you set the background of a 
RelativeLayout to a 9-patch image, you need to watch out for 
padding issues. It’s an easy fix though. Just set the padding to Odp 
and you’ll be all set. This overrides any default padding the 
Android runtime is trying to use which was causing all of that 
crazy positioning. 



<RelativeLayout 

xmlns : android="http : / / schemas . android . com/ apk/ res/android" 
android: layout_width="match_parent" 
android : layout_height="match_parent " 

android: background="0drawable/ skateboard_background M 

android : padding=" Odp" Set the paddmj to Odp 



> 




main.xml 



there j are no 

Dumb Questions 



O: Can I use 9-patch images with 
selectors? 



You sure can, and it’s a pretty 
common thing to do. You can use a 9-patch 
image for a button background, with one 
for pressed and one for not pressed. Then 
use Android text rendering instead of 
using the text embedded in the image and 
you can use the same pressed and non- 
pressed images over and over again! 



O: DO I have to make separate 
9-patch images for different screen 
densities? 



Yes. Like all other image resources, 
9-patch images are density dependent. 
Since 9-patch images scale though, you 
can sometimes get away without it. But 
it’s always a good idea to include multiple 
densities. 



% Do the 9-patch images have to 
resize the same for each pixel density? 



No. The 9-patch image includes both 
the image as well as the resizing areas. 
(The resize is marked with black pixels on 
the image border). So you can resize the 
images differently for each screen density. 
That said, you probably want to keep them 
pretty similar to keep your app consistent. 
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advanced graphics 




Tost Drivq 



Try running the app again, this time with the overridden padding set to Odp. 




Update Contact 




The buttons 

are Correctly 

positioned and look 
yea-t wi*tb -the 
images. 




The baekyound 
imaje looks <yreat 



Way tetter. Looks great now! 



you are here ► 
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using the app 



Out in the wild 

Testing the app is one thing, but the real 
reason you’re building the app is for Sam 
and Scott to use it! Let’s give them the app 
for the day and see how they use it. 






Sam 

1112223333 



Update Contact 





o 








advanced graphics 
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G# Off Piste 

That was some great work you did with the button graphics and 9-patch backgrounds. Here 
are some other things to look into if you want to make the app even better! 



Use move *)-pa-tdh images 

Tkere are number of plates you 
towld use 1-paitkes to make ike 
app tooler- Y®u tould use generit 
*)-paitk images -for botk buttons- 
You tould also make a tool *)-paitk 
border -for ike ike toniati pkoto 
io make it stand out a little more- 



Add lodaiioh -to -the -t*-t 

It s tool io lei someone know 
you re 01 s, but even tooler to lei 
ikem know wkere you are too/ We 
won't go into it kere, but look into 
the Android lotaiion APIs and add 
lotaiion in-fo to ike text message 
ike app is sending. 



Save -the selected don- tadt 

You probably noiited tkat every 
time you ran ike app, you kad 
seleti ike toniati again! Tkai s 
betause it’s not being saved to 
ike database- Use wkat you're 
learned about Android £<$L-iie 
databases to save ike toniati and 
auiomaiitally reload it on startup- 
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Your Android Toolbox 



You just did some major 
graphics heavy lifting! Let’s 
review what you’ve learned 
here that you can apply to all of 



your apps. 



ttrhdJCS 




setbotts overlap 



0 Use WhpaUk t^aMAt 

SC6t»Oir\S 

. Use tVie My just »/ •«" <1 '' a ^ We 

Selefrfcov-s 3nd ImageBu'Lfcons 

^ • Add images -for -the states (i.e. pressed, not 
pressed, selected, not selected, etc) 

• Create a selector XML file using the wizard 

• Add items -for each state and re-ferenCe the 
image drawable to use for that state 

• The selector is a 'drawable' so set the 
drawable Source on your ImageButton to the 
selector 




BULLET POINTS 



Use imageButtons when you want to 
use images for your buttons. 



Set the background drawable to 0nul.l to 
remove borders. 



Use Selectors to add multiple images to a 
single button based on state. 

Selector XML files go in the res/ 
drawable directory. You don’t need a 
separate selector for each screen size. 

Use 9-patch images to create expandable 
images 

Once you have a good PNG, use 
draw9patch to mark the resiable sections. 

Add 9-patch images to your project just 
like any other image drawable, in the res 
directory specific to your screen size. 

Make sure you have separate 9-patch 
images for each screen size group you are 
supporting. 

You can use 9-patch images for all kinds of 
resizable needs: background of EditTexts 
and TextViews, layout backgrounds, and 
more! 




picking the important stuff 



Leaving town... 




It's been great having you here in Androidville! 



We’re sad to see you leave, but there’s nothing like taking what you’ve learnt 
and putting it to use. You’re just beginning your Android journey and we’ve put you in the 
driving seat. We’re dying to hear how things go, so drop us a line at the Head First Labs 
web site, www.headfirstlabs.com, and let us know how Android is paying off for YOU! 
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